CSS點擊菜單出現目錄是一種常見的網頁導航方式。它可以讓用戶方便地查找網頁內容，提高用戶體驗。下面我們來介紹一下如何實現這種效果。

/* CSS代碼 */
ul.menu {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.menu li {
display: inline-block;
margin-right: 20px;
}
ul.submenu {
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 30px;
left: 0;
z-index: 99;
}
ul.submenu li {
background-color: #fff;
border: 1px solid #ccc;
display: block;
margin: 0;
padding: 0 10px;
}
ul.submenu li a {
color: #333;
display: block;
line-height: 30px;
text-decoration: none;
}
ul.submenu li a:hover {
background-color: #f5f5f5;
}
/* JavaScript代碼 */
$(function() {
$('.menu li').hover(
function() {
$('ul', this).stop().slideDown(200);
},
function() {
$('ul', this).stop().slideUp(200);
}
);
});

代碼中，首先定義了菜單的樣式，包括一級菜單和二級菜單。其中ul.menu定義了一級菜單的樣式，ul.submenu定義了二級菜單的樣式。一級菜單使用了inline-block布局，二級菜單使用了絕對定位，top和left屬性確定了二級菜單的位置。

接下來是JavaScript代碼，在頁面加載完成后，使用jQuery綁定了鼠標移入和移出一級菜單的事件，當鼠標移入一級菜單時，對應的二級菜單通過slideDown方法顯示出來，當鼠標移出一級菜單時，對應的二級菜單通過slideUp方法隱藏起來。

這樣，一個簡單的CSS點擊菜單出現目錄的效果就實現了。在實際開發中，可以根據需要進行樣式的調整和代碼的優化，以達到更好的效果。