ホバー時にIE6でドロップダウンメニューを表示するために、利用可能なほとんどすべてのソリューションを試しましたが、cudnt.IEの他のバージョンでは正常に機能しますが、IE6では機能しません.サブメニューのブロックが表示されません.
以下は、html コードと css コードです。Pls ヘルプ。
<!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;
}