下拉菜单能把导航菜单以分类的形式整理起来，是网页UI设计中不可缺少的一部分。因为浏览器的兼容性问题，下拉菜单大部分是通过js实现的，而这其中用的最多的jQuery插件是superfish，superfish可以帮助我们实现多级下拉菜单，和丰富的视觉菜单效果，对于下拉菜单比较复杂的情况，superfish是一个不错的选择。

可是很多情况下，我们用不到superfish这么多丰富的功能，今天我们要说的就是简单的情况，只有一级下拉菜单的情况。通过下面一段jQuery代码就可以实现下拉菜单，并且直接支持WordPress默认的菜单功能。

$('.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给菜单自动加上的css类，通过鼠标的进入和离开事件来控制子菜单的显示和隐藏，实现非常优雅和简洁。

当然，只有这一段代码还不够，还需要一些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是完成本实力中的代码所必须的，各位看官可以根据自己的需求增加css来美化下拉菜单。