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