jQuery脚本代码：
|
1 2 3 4 5 6 7 |
<script type='text/javascript'> $("#nav li").hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); }); </script> |
HTML代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="navwrap"> <ul id="nav"> <li class="current_page_item" ><a href="http://blog.kydbk.com">博客首页</a></li> <li class="page_item"> <a href="http://blog.kydbk.com" >编程开发</a> <ul class='children'> <li class="page_item"><a href="http://blog.kydbk.com" >PHP</a></li> <li class="page_item"><a href="http://blog.kydbk.com" >开源框架</a> <ul class='children'> <li class="page_item"><a href="http://blog.kydbk.com" >ThinkPHP</a></li> <li class="page_item"><a href="http://blog.kydbk.com" >Discuz</a></li> </ul> </li> <li class="page_item"><a href="http://blog.kydbk.com" >JavaScript</a></li> <li class="page_item"><a href="http://blog.kydbk.com" >开发环境</a></li> </ul> </li> <li class="current_page_item" ><a href="http://blog.kydbk.com">关于我们</a></li> <li class="current_page_item" ><a href="http://blog.kydbk.com">联系我们</a></li> </ul> </div> |
CSS代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
*,html{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font-size:11.5px;font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif;line-height:21px; } /* navwrap */ .navwrap{height:50px;line-height:50px;padding-right:18px;font-size:12px;background:url(../images/menu.png) no-repeat 100% 100%;width:420px;margin:0 auto;} #nav{float:left;height:50px;line-height:50px;padding-left:13px;} #nav, #nav ul{margin:0;padding:0;position:relative;line-height:50px;z-index:5;} #nav a{height:33px;display:block;padding:0 21px;text-decoration:none;text-align:center;line-height:28px; outline:none;z-index:35;position:relative;float:left;} #nav ul a{line-height:33px; } #nav li{float:left;position:relative;z-index:20;margin-top:11px;} #nav li li{border-left:none;margin-top:0;} #nav ul{position:absolute;display:none;width:172px;top:33px;left:-1px;} #nav li ul a{width:130px;height:auto;float:left;text-align:left;padding:0 21px;} #nav ul ul{top:auto;border-top:none;} #nav li ul ul{left:172px;top:0px;} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{display:none;} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{display:block;} #nav{background:url(../images/menu.png) no-repeat;} #nav a{color:#888;} #nav ul{border:1px solid #DFDFDF;border-top:none;} #nav li ul a{border-bottom:1px solid #fff;border-top:1px solid #DFDFDF;} #nav ul a, #nav ul li{background-color:#f5f5f5;background-image:none;} #nav ul a:hover, #nav ul a:focus{background-color:#fff;color:#555;} #nav a:hover, #nav a:focus{color:#555;} #nav .current_page_item a{color:#555;} #nav .current_page_parent .current_page_item a, #nav .current_page_item ul a{border-right:1px solid #f5f5f5;border-left:none;background-image:none;color:#444;} |
转载请注明：PHP笔记 » jQuery的hover事件制作三级导航菜单代码
