1

我已经尝试了所有可用的所有解决方案，用于在 IE6 中悬停但 cudnt 显示下拉菜单。它在其他版本的 IE 中工作正常，但不适用于 IE6。子菜单块没有显示。
下面是html代码和css代码。请帮忙。 

<!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;
}
4

1 回答 1

1

问题出在这里：

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

该:hover语句仅适用a于 IE6 中的 -Elements。

您可以做的是一个小的 JavaScript，它将 css-class 提供给JavaScript-Event 上.hover的-Element并在.lionmouseoveronmouseout

您的声明将如下所示：

#cssmenu li.hover ul
于 2013-10-24T09:44:28.597 回答