Problem with a drop-down menu in IE - css

Question

I have been struggling with this code for quite a few hours now and I have been unable to fix it. This is my CSS for my horizontal navigation:
#topmenu {
position: relative;
width: 690px;
left: 270px;
top: 11px;
}
#nav {
padding: 0px;
margin: 0px;
float: left;
}
#nav li {
float: left;
position: relative;
list-style: none;
margin: 0px;
margin-right: 6px;
}
#nav li ul {
display: none;
margin: -1em 0 0 -3em;
padding: 1em;
padding-top: 1.2em;
position: absolute;
top: 24px;
z-index: 500;
opacity: 0.96;
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=96)";
filter: alpha(opacity=96);
}
#nav li:hover ul {
display: block;
}
#nav li ul li {
display: block;
clear: both;
}
#nav li ul li a {
border-radius: 0px;
width: 125px;
font-size: 11px;
padding-left: 25px;
padding-right: 0px;
padding-bottom: 5px;
}
#nav li ul li span {
float: left;
color: #FFF;
font-size: 14px;
text-decoration: none;
font-weight: bold;
display: block;
background: #6AC1F3;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 0px;
width: 145px;
}
#nav a {
float: left;
color: #FFF;
font-size: 13px;
text-decoration: none;
display: block;
background: #6AC1F3;
padding: 5px 25px 5px 25px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-webkit-top-left-radius: 10px;
-webkit-top-right-radius: 10px;
}
#nav a:hover, #nav a.selected {
background-color: #FEA14F;
}
And this is my HTML code:
<div id="topmenu">
<ul id="nav">
<li><a class="rounded" href="index.html">Home</a></li>
<li><a class="rounded" href="about-us.htm">About Us</a></li>
<li><a class="rounded" href="contact.htm">Contact</a></li>
<li><a class="rounded" href="#">Services</a>
<ul>
<li><span>Manage</span></li>
<li>IT Management</li>
<li>Helpdesk Support</li>
<li>Planning and Consulting</li>
<li><span>Instruct</span></li>
<li>Software Training</li>
<li>Custom Curriculum</li>
<li>Social Networking</li>
<li><span>Grow</span></li>
<li>Website Design</li>
<li>Website Optimization</li>
<li>Internet Marketing</li>
<li><span>Secure</span></li>
<li>Remote Back Up</li>
<li>Scanning and Storage</li>
<li>Spam and Virus Protection</li>
</ul>
</li>
<li><a class="rounded" href="products.htm">Products</a></li>
<li><a class="rounded" href="real-estate-solutions.htm">Real Estate Solutions</a></li>
</ul>
</div>
The code works in Firefox, Chrome, but I am unable to make it work for IE. I have created additional rules for IE:
body {
behavior: url(csshover.htc);
}
#topmenu {
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
But all the menu does is display the drop-down, but when I try to select an item in the drop-down menu, the menu disappears.
What's the issue?

Answer 1

I see that you've mostly figured this out. You can use a semi transparent png to get the 96% opacity effect.
Alternatively you can use jquery's opacity, which i think is cross browser...

Answer 2

from my experience removing the filter isn't enough. the main problem is that IE li's don't extend to create one uninterrupted sequence, thus leaving empty spaces which aren't covered by the :hover rule, consequently causing the sub-menu to disappear.
the solution is to add a background color or image to the submenu's li and the triggering top menu li, in order to create a continuous sequence of li elements, with no spaces. (transparent background color won't work). if you don't want a background color applied simply add a 1pxX1px transparent PNG background image instead.
hope you find this helpful.