jquery css多级下拉菜单

83493467

2014-02-28

关注关注

jquery css多级下拉菜单

多级菜单，理论上支持无限多的层级，文件结构非常简单的，具体的请看下面的内容

演示

html文件部分

XML/HTML Code复制内容到剪贴板
<ul id="nav">  
<li class="site-name"><a href="#"> </a></li>  
    <li class="yahoo"><a href="http://www.freejs.net/daohangcaidan.html">导航菜单</a>  
        <ul>  
        <li><a href="#">导航菜单二级分类 »</a>              
            <ul>  
                <li><a href="#">1</a></li>  
                <li><a href="#">2</a></li>  
                <li><a href="#">3</a></li>  
                <li><a href="#">导航菜单三 »</a>  
                <ul>  
                    <li><a href="#">导航菜单4</a></li>  
                    <li><a href="#">1</a></li>  
                </ul>  
                </li>  
            </ul>  
        </li>  
        <li><a href="#">1</a></li>  
        <li><a href="#">2</a></li>  
        </ul>  
    </li>   
    <li class="facebook"><a href="#">翻页</a>  
        <ul>  
        <li><a href="#">1</a></li>  
        <li><a href="#">2</a></li>  
        </ul>  
    </li>  
  
  
</ul>  

js文件

JavaScript Code复制内容到剪贴板
<script>  
$(document).ready(function(){  
    $("#nav li").hover(  
    function(){  
        $(this).children('ul').hide();  
        $(this).children('ul').slideDown('fast');  
    },  
    function () {  
        $('ul', this).slideUp('fast');              
    });  
});  
</script>  

css文件

CSS Code复制内容到剪贴板
<style>  
/* navigation style */  
#nav{  
    height: 39px;  
    font: 12px Geneva, Arial, Helvetica, sans-serif;  
    background: #2D2D2D;  
    border: 1px solid #323232;    
    border-radius: 3px;  
    min-width:500px;  
    margin-left: 0px;  
    padding-left: 0px;  
}     
  
#nav li{  
    list-style: none;  
    display: block;  
    float: left;  
    height: 40px;  
    position: relative;  
    border-right: 1px solid #323232;  
}  
  
#nav li a{  
    padding: 0px 10px 0px 30px;  
    margin: 0px 0;  
    line-height: 40px;  
    text-decoration: none;  
    border-right: 1px solid #636161;  
    height: 40px;  
    color: #FFF;  
    text-shadow: 1px 1px 1px #66696B;  
}  
  
#nav ul{  
    background: #f2f5f6;   
    padding: 0px;  
    border-bottom: 1px solid #DDDDDD;  
    border-right: 1px solid #DDDDDD;  
    border-left:1px solid #DDDDDD;  
    border-radius: 0px 0px 3px 3px;  
    box-shadow: 2px 2px 3px #ECECEC;  
    -webkit-box-shadow: 2px 2px 3px #ECECEC;  
    -moz-box-shadow:2px 2px 3px #ECECEC;  
    width:170px;  
}  
#nav .site-name,#nav .site-name:hover{  
    padding-left: 10px;  
    padding-right: 10px;  
    color: #FFF;  
    background: url(images/logo.png) no-repeat 10px 5px;  
    width: 160px;  
}  
#nav .site-name a{  
    width: 129px;  
    overflow:hidden;  
}  
#nav li.facebook{  
    background: url(images/facebook.png) no-repeat 9px 12px;  
}  
#nav li.facebook:hover  {  
    background: url(images/facebook.png) no-repeat 9px 12px #010101;  
}  
#nav li.yahoo{  
    background: url(images/yahoo.png) no-repeat 9px 12px;  
}  
#nav li.yahoo:hover  {  
    background: url(images/yahoo.png) no-repeat 9px 12px #010101;  
}  
  
  
#nav li:hover{  
    background: #010101;  
}  
#nav li a{  
    display: block;  
}  
#nav ul li {  
    border-right:none;  
    border-bottom:1px solid #DDDDDD;  
    width:170px;  
    height:39px;  
}  
#nav ul li a {  
    border-right: none;  
    color:#6791AD;  
    text-shadow: 1px 1px 1px #FFF;  
    border-bottom:1px solid #FFFFFF;  
}  
#nav ul li:hover{background:#DFEEF0;}  
#nav ul li:last-child { border-bottom: none;}  
#nav ul li:last-child a{ border-bottom: none;}  
/* Sub menus */  
#nav ul{  
    display: none;  
    visibility:hidden;  
    position: absolute;  
    top: 40px;  
}  
  
/* Third-level menus */  
#nav ul ul{  
    top: 0px;  
    left:170px;  
    display: none;  
    visibility:hidden;  
    border: 1px solid #DDDDDD;  
}  
/* Fourth-level menus */  
#nav ul ul ul{  
    top: 0px;  
    left:170px;  
    display: none;  
    visibility:hidden;  
    border: 1px solid #DDDDDD;  
}  
  
#nav ul li{  
    display: block;  
    visibility:visible;  
}  
#nav li:hover > ul{  
    display: block;  
    visibility:visible;  
}  
</style>  
<!--[if IE 7]>  
<style>  
#nav{  
    margin-left:0px  
}  
#nav ul{  
    left:-40px;  
}  
#nav ul ul{  
    left:130px;  
}  
#nav ul ul ul{  
    left:130px;  
}  
</style>  
<![endif]-->  