CSS下拉菜单在IE6中不工作

我已经尝试了所有大多数所有可用的解决方案，用于在IE6上显示悬停但是cudnt的下拉菜单。它在IE的其他版本中可以正常工作，但不能与IE6一起使用。菜单没有显示。
下面是html代码和css代码。请帮助。CSS下拉菜单在IE6中不工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<link href="styles23.css" rel="stylesheet" type="text/css"/> 
</head> 
<body> 
<table> 
<tr> 
<td> 
<div id='cssmenu'> 
<ul> 
<li class='active'><a href='home.html'><span>Home</span></a></li> 
<li class='has-sub'><a href="#"><span>Services</span></a> 
<ul> 
<li><a href="#"><span>DNS</span></a></li> 
<li><a href="#"><span>LP </span></a></li> 
<li><a href="#.htm"><span>PC</span></a></li> 
</ul> 
</li> 
<li class='has-sub'><a href='#'><span>Careers</span></a> 
<ul> 
<li><a href='#'><span>Selection Process</span></a></li> 
<li><a href='#'><span>Submit Resume</span></a></li> 
<li><a href='#'><span>FAQ</span></a></li> 
</ul> 
</li> 
</ul> 
</div> 
</td> 
</tr> 
</table> 
</body> 
</html>

CSS代码如下

#cssmenu { 
border: none; 
border: 0px; 
margin: 0px; 
padding: 0px; 
font: 40.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
width: Auto; 
} 
#cssmenu ul { 
background: #ffb200; 
height: 25px; 
list-style: none; 
margin: 0; 
padding: 0; 
width:740px; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
-webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1); 
-moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1); 
box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1); 
} 
#cssmenu li { 
float: left; 
padding: 0px 0px 0px 10px; 
} 
#cssmenu li a { 
color: #000; 
display: block; 
font-weight: bold;/*for changing menu font*/ 
line-height: 25px; 
margin: 0px; 
padding: 0px 15px; 
text-align: center; 
text-decoration: none; 
font-size:11px; 
} 
#cssmenu li a:hover { 
background: #003597; 
color: #FFFFFF; 
text-decoration: none; 
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3); 
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3); 
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3); 
} 
#cssmenu ul li:hover a { 
background: #003597; 
color: #FFFFFF; 
text-decoration: none; 
} 

#cssmenu li ul { 
display: none; 
height: 30px; 
padding: 0px; 
margin: 0px; 
border: 0px; 
position: absolute; 
width: 150px; 
z-index: 100; 
} 
#cssmenu li:hover ul { 
display: block; 
} 
#cssmenu li li { 
display: block; 
float: none; 
margin: 0px; 
padding: 0px; 
width: 240px; 
height:33px; 
background: #FBDC7F; 
} 
#cssmenu li:hover li a { 
background: none; 
} 
#cssmenu li ul a { 
display: block; 
height: 25px; 
font-size: 10px; 
font-style: normal; 
margin: 0px; 
padding: 5px 10px 5px 10px; 
text-align: left; 
} 
#cssmenu li ul a:hover, 
#cssmenu li ul li:hover a { 
border: 0px; 
color: #FFFFFF; 
height:23px; /*changing the sub menu hover height*/ 
text-decoration:none; 
background: #003597; 
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3); 
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3); 
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3); 
} 
#cssmenu .has-sub ul li a 
{ 
display: block; 
color: #000; 
text-decoration: none; 
}

来源

2013-10-24 user1942809

您使用的CSS功能不工作在IE6整个堆栈。主要问题是'li：hover'。如果你真的需要支持IE6，那么你将无法在纯CSS中实现这一点 - 如果没有一些Javascript，无法在IE6中使用它。 – Spudley

的问题就在这里：

#cssmenu li:hover ul { 
    display: block; 
}

的:hover声明仅适用于a -elements在IE6。

你可以做什么，是一个小型的JavaScript这给CSS类.hover到li - 元素对JavaScript的事件onmouseover并删除它onmouseout。然后

你的声明是这样的：

#cssmenu li.hover ul

来源

2013-10-24 09:44:28 spaark

Chuck Norris？.. – SaturnsEye

@spaark可以用它来详细说明，我很困惑。就是说你要写一个javascript函数，在鼠标悬停在li上会显示该块。请让我来举个例子。 – user1942809

我想我得到了它..就像在鼠标上的evnt我shud添加类document.getElementById（“MyElement”）。className =“MyClass”;并在鼠标移除。谢谢你撇号 – user1942809

CSS下拉菜单在IE6中不工作

回答

相关问题