87,843
社区成员
发帖
与我相关
我的任务
分享新手上路：IE6 display:block 的BUG，请指教！
如上图所示：IE6 在hover的时候，自动出现背景色，且高度自动增加，IE8 就没有这样的BUG，火狐这些就更加没有了。网上得知有现成的js代码可以 实现 a之外的伪类，但是我不想只抄代码，所以想明白，这样的代码应该如何手工修改，才能去掉BUG，谢谢！！！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
$( function(){
$("#nav ul li").hover(
function(){
$(this).children("ul").attr("style","display:block;")
},
function() {
$(this).children("ul").attr("style", "");
}
) <!-- hover end-->
});
</script>
<style type="text/css">
ul{ list-style:none}
a { text-decoration:none;color:#9E7FF9;}
a:hover{color:#238dba; }
#nav ul { margin:0px auto; }
#nav ul li { width:100px; height:28px; line-height:28px; float:left; text-align:center;}
#nav ul li ul { margin:0px auto; padding:0px; display:none; }
/* 伪类 IE6 不支持，需用JS实现；很关键，鼠标经过时
#nav ul li:hover ul { display:block;}
*/
#nav ul li ul li{ width:100px;background:none; }
</style>
<title>jQuery nav menu</title>
</head>
<body>
<div style="width:300px;">
<div id="nav" style=" float:left; width:600px; height:28px; line-height:28px; background:#d4d4d4">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">介 绍</a></li>
<li><a href="#">新 闻</a>
<ul>
<li><a href="#">国内新闻</a></li>
<li><a href="#">国外新闻</a></li>
</ul>
</li>
<li><a href="#">产 品</a>
<ul>
<li><a href="#">主打产品</a></li>
<li><a href="#">热门产品</a></li>
</ul>
</li>
<li><a href="#">关 于</a></li>
</ul>
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
风寒晓 2015-09-07
- 打赏
- 举报
谢谢，不用回复了，知道了，因为底图是 none ，所以自动消失了，弄个底图就正常了。
风寒晓 2015-09-07
- 打赏
- 举报
谢谢，虽然是基础知识，我之前在某个网站看到，利用绝对定位和相对定位，但是又忘记了，谢谢。
现在又出现一个新问题，鼠标往下滑动的时候，2级UL就消失了，超链接点不到。
天际的海浪 2015-09-06
- 打赏
- 举报
#nav ul { margin:0px auto; }
#nav ul li { width:100px; height:28px; line-height:28px; float:left; text-align:center; position: relative; }
#nav ul li ul { position: absolute; left: 0px; top: 28px;
margin:0px; padding:0px; display:none; }
