【发布时间】：2013-10-25 02:29:46
【问题描述】：
我已经尝试了所有可用的所有解决方案，用于在 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;
}
【问题讨论】：
-
您正在使用一整套在 IE6 中不起作用的 CSS 功能。具体来说，主要问题是
li:hover。如果你真的需要支持 IE6，那么你将无法在纯 CSS 中实现这一点——如果没有一些 Javascript，就不可能在 IE6 中实现这一点。
标签： html css internet-explorer-6