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中不工作

回答

相關問題