CODEWITHSUNDEEP
htmlcssinternet-explorer-6
user1942809
user1942809

Reputation: 25

CSS Drop Down Menu not working in IE6

I have tried all most all solutions available, for displaying the drop down menus in IE6 on hover but cudnt.It works fine in other version of IE but not with IE6.The block for sub menus is not getting displayed.
Below is the html code and css code.Pls Help. 

<!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>

The CSS Code as follows 

#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;
}

Upvotes: 1

Views: 420

Answers (1)

spaark
spaark

Reputation: 711

The problem lies here:

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

The :hover statement works only on a-Elements in IE6.

What you could do, is a small JavaScript which gives the css-class .hover to the li-Element on the JavaScript-Event onmouseover and removes it on onmouseout.

Your declaration would then look like this:

#cssmenu li.hover ul

Upvotes: 1

Related Questions