这是一个创建于 4102 天前的主题,其中的信息可能已经有所发展或是发生改变。
<div id="nav" class="layout fn-clear">
<ul class="fn-clear">
<li><a href="#" title="父栏目" target="_blank">父栏目</a>
<ul class="sub-menu" style="display:none;padding:0;margin:0">
<li><a href="#" title="子栏目1" target="_blank">子栏目1</a></li>
<li><a href="#" title="子栏目2" target="_blank">子栏目2</a></li>
</ul>
</li>
<ul>
</div>
css代码如下:
#nav{
height:43px;
}
#nav li{
position:relative;
float:left;
display:inline;
text-align:center;
font:normal 14px/43px Arial, Helvetica, sans-serif;
}
#nav li a{display:block; width:100px; height:43px; overflow:hidden; float:left; }
#nav li.has-sub{
background:url(img/nav-sel.png) no-repeat center 0;
}
#nav .sub-menu{
width:100px;
position:absolute;
top:43px;
left:0;
z-index:100;
}
#nav .sub-menu li{
display:block;
height:31px;
width:100px;
overflow:hidden;
line-height:30px;
width:100%;
background:rgba(0,133,218,0.8);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#CC0085DA', EndColorStr='#CC0085DA');
}
#nav li a{color:#fff;}
#nav .sub-menu li a{ height:30px; width:100px;
border-bottom:1px solid #FFF; }
js代码如下:
$("#nav>ul>li").each(function(index){
var hasSub = $(this).children("ul").length>0;
if(hasSub){
$(this).hover(function(e){
$(this).addClass("has-sub");
$(this).children("ul").slideDown(200);
},function(e){
$(this).removeClass("has-sub");
$(this).children("ul").stop().slideUp(200);
});
}
});
现在的问题是这样的:
鼠标放在父栏目上面,显示其子栏目。然后可以选择子栏目。但是ie8出现的效果是:从父栏目上面移到子栏目上的时候,子菜单消失了。
2 条回复 • 1970-01-01 08:00:00 +08:00
|
|
1
justfindu 2013-09-30 11:01:10 +08:00
float了没有清除~ 下面子栏目在IE下就是没有高度~
|
|
|
2
cst4you 2013-10-01 03:02:47 +08:00
不考虑IE6的话可以尝试用CSS实现
|