Question

我已经尝试了所有可用的解决方案，用于在悬停时显示IE6中的下拉菜单但cudnt.It在其他版本的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;
}

Answer 1

问题在于：

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

:hover语句仅适用于a - IE6中的元素。

你能做什么，是一个小型JavaScript，它将css-class .hover提供给li - JavaScript-Event onmouseover上的元素，并将其移除onmouseout }。

您的声明将如下所示：

#cssmenu li.hover ul

CSS下拉菜单在IE6中不起作用

1 个答案: