jQuery左侧四级菜单导航

分享一款常用的多级左侧菜单导航，鼠标悬浮菜单上，会显示弹出层子级菜单，鼠标离开菜单，子级菜单则消失。

分类：导航菜单 > 多级菜单难易：中级

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

HTML

在.sidebar_con放置dl 菜单，一级菜单标题dt，二级标题dd h3,三级和四级菜单.sidebar_popup

<div class="sidebar_con">
    <dl class="sidebar_item">
        <dt><i class="sidebar_item_icon01"></i><span>机器设备</span></dt>
        <dd>
            <h3><a href="http://www.sucaihuo.com/js">通用机械设备</a></h3>
        <s></s>
        <div class="sidebar_popup dis1" style="display:none;">
            <div class="sidebar_popup_class clearfix">
                <div class="sidebar_popup_item"> <strong><a href="http://www.sucaihuo.com/js">泵与阀门</a></strong>
                    <p><span class="linesbg"><a href="http://www.sucaihuo.com/js">真空泵</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">离心泵</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">计量泵</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">水泵</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">油泵</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">阀门</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">球阀</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">安全阀</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">电磁阀</a></span><span class="more"><a href="http://www.sucaihuo.com/js">更多</a></span></p>
                </div>
                <div class="sidebar_popup_item"> <strong><a href="http://www.sucaihuo.com/js">机床</a></strong>
                    <p><span class="linesbg"><a href="http://www.sucaihuo.com/js">数控机床</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">金属切削机床</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">车床</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">磨床</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">锻压机床</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">特种加工机床</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">机床附件</a></span></p>
                </div>
            </div>
            <div class="sidebar_popup_all"><a href="http://www.sucaihuo.com/js"><span class="linesbg">查看全部通用机械设备</span></a></div>
        </div>
        </dd> 
    </dl>
</div>

jQuery

$(".sidebar").hoverDelay(function() {
    $("#sidebar_box").show();
    $(".sidebar_top s").addClass("s_down");
}, function() {
    $("#sidebar_box").hide();
    $(".sidebar_top s").removeClass("s_down");
});

$(".sidebar_item dd").hoverDelay(function() {
    $(this).find("h3").addClass("sidebar_focus");
    $(this).find(".sidebar_popup").show(0);
}, function() {
    $(this).find("h3").removeClass("sidebar_focus");
    $(this).find(".sidebar_popup").hide(0);
});