【转】jquery css多级下拉菜单

jquery css多级下拉菜单

 

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]-->

转自：http://freejs.iteye.com/blog/1946387