下拉菜單能把導(dǎo)航菜單以分類(lèi)的形式整理起來(lái)，是網(wǎng)頁(yè)UI設(shè)計(jì)中不可缺少的一部分。因?yàn)闉g覽器的兼容性問(wèn)題，下拉菜單大部分是通過(guò)js實(shí)現(xiàn)的，而這其中用的最多的jQuery插件是superfish，superfish可以幫助我們實(shí)現(xiàn)多級(jí)下拉菜單，和豐富的視覺(jué)菜單效果，對(duì)于下拉菜單比較復(fù)雜的情況，superfish是一個(gè)不錯(cuò)的選擇。

可是很多情況下，我們用不到superfish這么多豐富的功能，今天我們要說(shuō)的就是簡(jiǎn)單的情況，只有一級(jí)下拉菜單的情況。通過(guò)下面一段jQuery代碼就可以實(shí)現(xiàn)下拉菜單，并且直接支持WordPress默認(rèn)的菜單功能。

$('.menu-item-has-children').mouseenter(function() {
    $(this).children('.sub-menu').show();
});

$('.menu-item-has-children').mouseleave(function() {
    $(this).children('.sub-menu').hide();
});

代碼中的.menu-item-has-children和.sub-menu都是WordPress給菜單自動(dòng)加上的css類(lèi)，通過(guò)鼠標(biāo)的進(jìn)入和離開(kāi)事件來(lái)控制子菜單的顯示和隱藏，實(shí)現(xiàn)非常優(yōu)雅和簡(jiǎn)潔。

當(dāng)然，只有這一段代碼還不夠，還需要一些CSS的支持。

.menu-item-has-children{
    position:relative;
}

li.menu-item-has-children .sub-menu{
    display:none;
    position: absolute;
    background: #333;
    margin-left: -50%;
    left: 50%;
}

上面的css是完成本實(shí)力中的代碼所必須的，各位看官可以根據(jù)自己的需求增加css來(lái)美化下拉菜單。