CSS點(diǎn)擊菜單出現(xiàn)目錄是一種常見(jiàn)的網(wǎng)頁(yè)導(dǎo)航方式。它可以讓用戶方便地查找網(wǎng)頁(yè)內(nèi)容，提高用戶體驗(yàn)。下面我們來(lái)介紹一下如何實(shí)現(xiàn)這種效果。

/* 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);
}
);
});

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

接下來(lái)是JavaScript代碼，在頁(yè)面加載完成后，使用jQuery綁定了鼠標(biāo)移入和移出一級(jí)菜單的事件，當(dāng)鼠標(biāo)移入一級(jí)菜單時(shí)，對(duì)應(yīng)的二級(jí)菜單通過(guò)slideDown方法顯示出來(lái)，當(dāng)鼠標(biāo)移出一級(jí)菜單時(shí)，對(duì)應(yīng)的二級(jí)菜單通過(guò)slideUp方法隱藏起來(lái)。

這樣，一個(gè)簡(jiǎn)單的CSS點(diǎn)擊菜單出現(xiàn)目錄的效果就實(shí)現(xiàn)了。在實(shí)際開(kāi)發(fā)中，可以根據(jù)需要進(jìn)行樣式的調(diào)整和代碼的優(yōu)化，以達(dá)到更好的效果。