CSS下拉菜单，当属标离去时，下拉菜单背景不隐藏
火狐下测试正常，IE6下测试，就这样，属标离去后，下拉菜单背景不隐藏代码如下，高手帮我看下<html><head><STYLEtype=text/css>#div_lnb...
火狐下测试正常，IE6下测试，就这样，属标离去后，下拉菜单背景不隐藏
代码如下，高手帮我看下
<html>
<head>
<STYLE type=text/css>
#div_lnb {
Z-INDEX: 2;
BACKGROUND: #000000 no-repeat;
MARGIN: 0px 0px 10px;
POSITION: relative;
height: 48px;
width: 970px;
}
#div_lnb UL {
PADDING-RIGHT: 0px;
PADDING-LEFT: 110px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 800px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
height: 48px;
}
#div_lnb UL LI {
FLOAT: left;
WIDTH: 107px;
text-align: center;
padding-top: 10px;
margin-top: 5px;
height: 25px;
}
#div_lnb UL LI span {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
}
#div_lnb UL LI A {
DISPLAY: block; WIDTH: 107px;
}
/*下拉*/
#div_lnb ul .menu {
}
#div_lnb ul li a {
text-decoration: none;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
height: 25px;
}
#div_lnb ul li:hover, #div_lnb ul li a:hover {
border: 0px;
}
#div_lnb ul li dl {
display: none;
height: 150px;
width: 107px;
left: 217px;
top: 4px;
position: absolute;
padding-bottom: 10px;
background-repeat: no-repeat;
background-position: 0px 0px;
float: left;
background-color: #66CC00;
}
#div_lnb ul li:hover dl {
display: block;
}
#div_lnb ul li a:hover dl {
display: block;
}
#div_lnb ul .menu a TABLE {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; PADDING-BOTTOM: 0px; MARGIN: -1px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse
}
#div_lnb ul .menu dl dt {
height: 28px;
font-weight: bold;
font-size: 14px;
line-height: 30px;
color: #FFFFFF;
padding-top: 4px;
float: left;
width: 107px;
}
#div_lnb ul .menu dl dd {
height: 29px;
float: left;
width: 107px;
}
#div_lnb ul .menu dl dd a {
overflow: hidden;
font-weight: normal;
font-size: 13px;
line-height: 30px;
color: #FFFFFF;
}
#div_lnb ul .menu dl dd a:hover {
font-size: 13px;
color: #FF0033;
text-decoration: none;
}
-->
/*//下拉*/
</STYLE>
</head>
<body>
<DIV id=div_lnb style="Z-INDEX: 100">
<UL>
<li><a href='/'><span>专区首页</span></a></li>
<!-- 开始 -->
<li class=menu>
<!--[if lte IE 6]><a href="#nogo"><TABLE><TR><TD><![endif]-->
<a href="#nogo" target="_blank">CSS下拉测试</a>
<dl>
<dt>CSS下拉测试</dt>
<dd><a class=dla href="#about1">游戏特色</a></dd>
<dd><a class=dla href="#about2">游戏内容</a></dd>
<dd><a class=dla href="#about3">游戏介绍</a></dd>
<dd><a class=dla href="#about4">游戏界面</a></dd>
</dl><!--[if lte IE 6]></TD></TR></TABLE></a><![endif]-->
</li>
<!-- 结束 -->
<li><a href='/zixun/' ><span>资讯</span></a></li>
<li><a href='/tupian/' ><span>图片</span></a></li>
<li><a href='/shipin/' ><span>视频</span></a></li>
<li><a href='/wanjia/' ><span>玩家生活秀</span></a></li>
<li><a href='' ><span>火爆论坛</span></a></li>
</UL></DIV>
</body>
</html> 展开
代码如下，高手帮我看下
<html>
<head>
<STYLE type=text/css>
#div_lnb {
Z-INDEX: 2;
BACKGROUND: #000000 no-repeat;
MARGIN: 0px 0px 10px;
POSITION: relative;
height: 48px;
width: 970px;
}
#div_lnb UL {
PADDING-RIGHT: 0px;
PADDING-LEFT: 110px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 800px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
height: 48px;
}
#div_lnb UL LI {
FLOAT: left;
WIDTH: 107px;
text-align: center;
padding-top: 10px;
margin-top: 5px;
height: 25px;
}
#div_lnb UL LI span {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
}
#div_lnb UL LI A {
DISPLAY: block; WIDTH: 107px;
}
/*下拉*/
#div_lnb ul .menu {
}
#div_lnb ul li a {
text-decoration: none;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
height: 25px;
}
#div_lnb ul li:hover, #div_lnb ul li a:hover {
border: 0px;
}
#div_lnb ul li dl {
display: none;
height: 150px;
width: 107px;
left: 217px;
top: 4px;
position: absolute;
padding-bottom: 10px;
background-repeat: no-repeat;
background-position: 0px 0px;
float: left;
background-color: #66CC00;
}
#div_lnb ul li:hover dl {
display: block;
}
#div_lnb ul li a:hover dl {
display: block;
}
#div_lnb ul .menu a TABLE {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; PADDING-BOTTOM: 0px; MARGIN: -1px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse
}
#div_lnb ul .menu dl dt {
height: 28px;
font-weight: bold;
font-size: 14px;
line-height: 30px;
color: #FFFFFF;
padding-top: 4px;
float: left;
width: 107px;
}
#div_lnb ul .menu dl dd {
height: 29px;
float: left;
width: 107px;
}
#div_lnb ul .menu dl dd a {
overflow: hidden;
font-weight: normal;
font-size: 13px;
line-height: 30px;
color: #FFFFFF;
}
#div_lnb ul .menu dl dd a:hover {
font-size: 13px;
color: #FF0033;
text-decoration: none;
}
-->
/*//下拉*/
</STYLE>
</head>
<body>
<DIV id=div_lnb style="Z-INDEX: 100">
<UL>
<li><a href='/'><span>专区首页</span></a></li>
<!-- 开始 -->
<li class=menu>
<!--[if lte IE 6]><a href="#nogo"><TABLE><TR><TD><![endif]-->
<a href="#nogo" target="_blank">CSS下拉测试</a>
<dl>
<dt>CSS下拉测试</dt>
<dd><a class=dla href="#about1">游戏特色</a></dd>
<dd><a class=dla href="#about2">游戏内容</a></dd>
<dd><a class=dla href="#about3">游戏介绍</a></dd>
<dd><a class=dla href="#about4">游戏界面</a></dd>
</dl><!--[if lte IE 6]></TD></TR></TABLE></a><![endif]-->
</li>
<!-- 结束 -->
<li><a href='/zixun/' ><span>资讯</span></a></li>
<li><a href='/tupian/' ><span>图片</span></a></li>
<li><a href='/shipin/' ><span>视频</span></a></li>
<li><a href='/wanjia/' ><span>玩家生活秀</span></a></li>
<li><a href='' ><span>火爆论坛</span></a></li>
</UL></DIV>
</body>
</html> 展开
4个回答
展开全部
浏览器对于hover的兼容问题：
IE6中，只a标签支持hover （可能还有少数几个支持——未考证，但li肯定不行）所以
#div_lnb ul li:hover dl {
display: block;
}
将不起作用，导致出现目前的问题。
解决方法：
1、使用js代码实现下拉菜单
2、修改现有css，并以只a标签使用hover，其他标签绝不使用
IE6中，只a标签支持hover （可能还有少数几个支持——未考证，但li肯定不行）所以
#div_lnb ul li:hover dl {
display: block;
}
将不起作用，导致出现目前的问题。
解决方法：
1、使用js代码实现下拉菜单
2、修改现有css，并以只a标签使用hover，其他标签绝不使用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个css菜单好难弄
这里有一个js的下拉菜单
你可以试试
这里有一个js的下拉菜单
你可以试试
参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?9=j&id=11931
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不知道你是从哪里下的方法，你把table改为div应该可以解决的，绝对相对定位放到table里面有显示bug。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼上正解
IE6中只有a才有hover的伪类属性···其他的吗···额 去IE7吧 那就对了 哈哈！
IE6中只有a才有hover的伪类属性···其他的吗···额 去IE7吧 那就对了 哈哈！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
