jQuery蓝色下拉导航菜单代码

分享一款企业站通用的菜单导航，悬浮主导航菜单显示二级下拉菜单效果。jQuery代码很简单，一个hover事件即可解决。

分类：导航菜单 > 下拉导航难易：初级

查看演示下载资源下载积分： 20 积分

HTML

一级菜单：#nav-menu li.stmenu,二级菜单.children，默认全部二级菜单隐藏

<div id="nav-menu">
    <ul class="menu">
        <li class="stmenu"><h3><a href="http://www.sucaihuo.com/js" class="xialaguang"><span>网站首页</span></a></h3></li>
        <li class="stmenu">
            <h3><a href="http://www.sucaihuo.com/js" class="xialaguang"><span>网页教程</span></a></h3>    
            <ul class="children">    
                <li><h3><a href="http://www.sucaihuo.com/js"><span>基础知识</span></a></h3></li>
                <li><h3><a href="http://www.sucaihuo.com/js"><span>优秀教程</span></a></h3></li>
            </ul>
        </li>
        <li class="stmenu">
            <h3><a href="http://www.sucaihuo.com/js" class="xialaguang"><span>网页特效</span></a></h3>    
            <ul class="children">    
                <li><h3><a href="http://www.sucaihuo.com/js"><span>焦点图</span></a></h3></li>
                <li><h3><a href="http://www.sucaihuo.com/js"><span>常用代码</span></a></h3></li>
            </ul>
        </li>
        <li class="stmenu"><h3><a href="http://www.sucaihuo.com/js" class="xialaguang"><span>设计欣赏</span></a></h3></li>
        <li class="stmenu"><h3><a href="http://www.sucaihuo.com/js" class="xialaguang"><span>素材</span></a></h3></li>
    </ul>
</div>

jQuery

悬浮一级菜单hover事件

$('#nav-menu .menu > li').hover(function() {
    $(this).find('.children').animate({opacity: 'show', height: 'show'}, 200);
    $(this).find('.xialaguang').addClass('navhover');
}, function() {
    $('.children').stop(true, true).hide();
    $('.xialaguang').removeClass('navhover');
});