最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
多级下拉菜单代码
时间:2010-05-21 编辑:简简单单 来源:一聚教程网
html代码
css教程代码
ul, li{padding:0;margin:0;}
ul li{float:left;;margin-right:1px;display:inline;list-style:none;text-align:center;}
ul li ul li{float:none;background:#ccc;margin-bottom:1px;display:block;_display:inline;position:relative;}
ul li ul{display:none;}
ul a{text-decoration:none;line-display:block;background:#bbb;font-size:12px}
ul li a:hover{background:#eee;color:#000}
ul li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
ul li ul li .aaa li{float:none;}
body .bbb{background:#f00;color:#fff}
jquery代码
$(document).ready(function(){
$("ul li").hover(function(){
$(this).find("ul:first").show();//鼠标滑过查找li下面的第一个ul然后显示;
},function(){
$(this).find("ul:first").hide();//鼠标离开隐藏li下面d的ul;
})
$("ul li ul li ul").prev().addClass("bbb");//给li下面ul是aaa的样式的前一个同辈元素添加css;
})
-
上一个: FTP自动备份网站数据
相关文章
- 仿保时捷官网多级下拉菜单效果 06-10
- 多级下拉菜单 07-01
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31