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://www.freejs.net/article_daohangcaidan_13.html