jQuery下拉二级菜单导航带图片

分享一个企业通用的企业二级下拉菜单，并且可附带该分类图片。代码很简单，请看下方菜单导航js代码。

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

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

HTML

首先在#nav放置多个列表li,并且在子级加ol下拉列表和图片.nav-img

<div id="nav" class="nav">
    <ul>
        <li id="mainlevel_01" class="first-crl mainlevel">
            <a class="nav-a" href="http://www.sucaihuo.com">走进西王</a> 
            <div id="sub_01">
                <ol>
                    <li><a href="http://www.sucaihuo.com">集团概况</a><a href="http://www.sucaihuo.com">组织架构</a><a href="http://www.sucaihuo.com">领导关怀</a></li>
                    <li><a href="http://www.sucaihuo.com">董事长风采</a><a href="http://www.sucaihuo.com">公司管理</a><a href="http://www.sucaihuo.com">社会关注</a></li>
                </ol>
                <span class="nav-img"><img src="images/nav-img-01.jpg"></span>
            </div>
        </li>
    </ul>
</div>

jQuery

当导航菜单.mainlevel下级有div的时候，鼠标在当前区域悬浮和离开时的触发事件

$(function() {
    $(".mainlevel:has(div)").hover(function() {
        $(this).children("div").stop(true, true).slideDown(300)
    }, function() {
        $(this).children("div").stop(true, true).slideUp(1)
    })
});