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；
})
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;width:80px;height:20px;line-height:20px;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}
html
代码如下:
栏目一
菜单一 菜单一 菜单一 菜单一
菜单三 菜单三
菜单三 菜单三 菜单三
菜单三 菜单三 菜单三
菜单三 菜单三 菜单三 菜单三 菜单三 菜单三 菜单三 菜单三
栏目二
栏目三
菜单三
菜单三
菜单三 菜单三
菜单三 菜单三 菜单三
菜单三 菜单三 菜单三 菜单三 菜单三
菜单三 菜单三
菜单三 菜单三 菜单三 菜单三 菜单三 菜单三 菜单三 菜单三 菜单三 菜单三
栏目四
