jQuery仿京东首页左侧菜单导航

一级导航

<div class="dd-inner">
    <div  class="item fore1">
        <h3><a href="http://channel.jd.com/electronic.html" target="_blank">家用电器</a></h3>
        <i>></i> 
    </div>
    <div class="item fore2">
        <h3><a href="http://shouji.jd.com/" target="_blank">手机</a>、<a href="http://shuma.jd.com/" target="_blank">数码</a>、<a href="http://mobile.jd.com/" target="_blank">京东通信</a></h3>
        <i>></i> 
    </div>
</div>

二级导航请看#index_menus_sub

<div style="display: none;" class="dorpdown-layer" id="index_menus_sub">
    <div class="item-sub">
        <div class="item-brands">
            <div class="brands-inner">
                <a target="_blank" class="img-link" href="http://jmall.jd.com/shop/midea/index.html?erpad_source=erpad">
                    <img width="83" height="35" src="http://img10.360buyimg.com/vclist/jfs/t832/286/5445725/2411/8aae93c1/54d9eeeeN993b74f4.jpg">
                </a>
      .......
            </div>
        </div>
    </div>
</div>

jQuery

$(function() {
    $(".dd-inner").children(".item").hover(function() { //一级导航悬浮
        $(this).addClass("hover").siblings(".item").removeClass("hover");
        var index = $(this).index();
        $(".dorpdown-layer").children(".item-sub").hide();
        $(".dorpdown-layer").children(".item-sub").eq(index).show();

    }) $(".dd-inner").hover(function() { //整个导航菜单悬浮，是否显示二级导航到出厂
        $("#index_menus_sub").show();
    },
    function() {
        $("#index_menus_sub").hide();
        $('.item').removeClass("hover");
    }) $("#index_menus_sub").children(".item-sub").hover(function() { //二级导航悬浮
        var index = $(this).index();
        $(".dd-inner").children(".item").eq(index).addClass("hover");
        $("#index_menus_sub").show();
    },
    function() {
        $("#index_menus_sub").hide();
        $(".dd-inner").children(".item").removeClass("hover");
    })
})