[原创]Jquery实现二级菜单 

<body>
    <div id="navigation" class="navigation">
        <ul class='menu'>
            <li><a href=''>首页</a></li>
            <li><a href=''>网站推荐</a>
                <ul class='sub-menu'>
                    <li><a href='menuList.aspx?menurank=3&&secondmenurank=1'>综合日用</a></li>
                    <li><a href='menuList.aspx?menurank=3&&secondmenurank=2'>服装配饰</a></li>
                    <li><a href='menuList.aspx?menurank=3&&secondmenurank=3'>母婴药房</a></li>
                    <li><a href='menuList.aspx?menurank=3&&secondmenurank=1'>儿妆护肤</a></li>
                    <li><a href='menuList.aspx?menurank=3&&secondmenurank=2'>天然有机</a></li>
                    <li><a href='menuList.aspx?menurank=3&&secondmenurank=3'>儿童家具</a></li>
                    <li><a href='menuList.aspx?menurank=3&&secondmenurank=1'>二手e淘</a></li>
                    <li><a href='menuList.aspx?menurank=3&&secondmenurank=2'>名品汇聚</a></li>
                </ul>
            </li>
            <li><a href='#'>e站转运</a>
                <ul class='sub-menu'>
                    <li><a href='menuList.aspx?menurank=3&&secondmenurank=1'>关于我</a></li>
                    <li><a href='menuList.aspx?menurank=3&&secondmenurank=2'>转运需知</a></li>
                </ul>
            </li>
            <li><a href=''>e淘攻略</a></li>
            <li><a href='#'>e团精选</a>
                <ul class='sub-menu'>
                    <li><a href='menuList.aspx?menurank=5&&secondmenurank=1'>常态精选</a></li>
                    <li><a href='menuList.aspx?menurank=5&&secondmenurank=2'>限时特惠</a></li>
                </ul>
            </li>
            <li><a href=''>合作商家</a></li>
            <li><a href=''>时尚资讯</a></li>
            <li><a href=''>e站blog</a></li>
            <li><a href=''>我的购物车</a></li>
        </ul>
    </div>
</body>
/* Main Menu */
.navigation{ float:left; margin:0px 0px 0px; width:100%; height:32px; background-color:White; overflow:visible;}
.menu{ float:left; width:100%; height:34px; padding:1px 10px; position:relative; z-index:300; font-weight:normal;}
.menu li{  width:135px; float:left; margin:0px; padding:0px; font-size:18px; text-align:center; white-space:nowrap; background-color:White; }
.menu li.homepage{ background:none;}
.menu li a:link, .menu li a:visited{ margin:0px; padding:5px 0px 5px 0px; color:black; text-decoration:none; display:block; background-color:White;}
.menu li a:hover{ color:#94C365;   background-color:White;}
.menu li.current_page_item a:link, .menu li.current_page_item a:visited, .menu li.current_page_item a:hover, .menu li.current-menu-item a:link, .menu li.current-menu-item a:visited, .menu li.current-menu-item a:hover{ color:#94C365; }

.menu ul{ position:relative; z-index:300; background-color:White;}
.menu li{ position:relative;}
.menu li ul{ position:absolute; padding:0px; width:auto;  min-width:135px; text-align:center;   overflow:visible; left:0px; display:none;}
.menu li ul li{ margin:0px; width:auto; min-width:135px; text-align:center; overflow:visible; }
.menu li ul li a:hover{ color:#94C365; background-color:White; }
   <script type="text/javascript">
        window.onload = function () {
    
            document.querySelectorAll(".menu li").onmourseover = function () {
            
                this.querySelector("ul").style.display = "block";
            }
            document.querySelectorAll(".menu li").onmourseout = function () {
           
                this.querySelector("ul").style.display = "none";
                        }
        }
    </script>

其实就是子菜单的隐藏与显示。li的float和子菜单的z-index

posted @ 2015-04-09 11:38  杨博客  阅读(2296)  评论(0)  编辑  收藏  举报