Problem with a drop-down menu in IE

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><a href="manage-it-management.htm">IT Management</a></li>
                    <li><a href="manage-helpdesk-support.htm">Helpdesk Support</a></li>
                    <li><a href="manage-planning-and-consulting.htm">Planning and Consulting</a></li>
                    <li><span>Instruct</span></li>
                    <li><a href="instruct-software-training.htm">Software Training</a></li>
                    <li><a href="instruct-custom-curriculum.htm">Custom Curriculum</a></li>
                    <li><a href="instruct-social-networking.htm">Social Networking</a></li>
                    <li><span>Grow</span></li>
                    <li><a href="grow-website-design.htm">Website Design</a></li>
                    <li><a href="grow-website-optimization.htm">Website Optimization</a></li>
                    <li><a href="grow-internet-marketing.htm">Internet Marketing</a></li>   
                    <li><span>Secure</span></li>
                    <li><a href="secure-remote-back-up.htm">Remote Back Up</a></li>
                    <li><a href="secure-scanning-and-storage.htm">Scanning and Storage</a></li>
                    <li><a href="secure-spam-and-virus-protection.htm" class="roundbtm">Spam and Virus Protection</a></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?

Which version(s) of IE? Do you have a live page available to look at? — thirtydot, Jul 27 '11 at 11:45
@thirtydot, I use IE8. It's available here http://www.sendspace.com/file/12cdyz — Pateman, Jul 27 '11 at 11:49
I found a solution. You need to remove the `filter: alpha(opacity=96);` from the CSS. Weird, but it works that way. I guess I need to find a way around that. — Pateman, Jul 27 '11 at 13:06
`filter` often (always?) causes something similar to `overflow: hidden` to be applied. I didn't look at your demo yet, do you still need help? — thirtydot, Jul 27 '11 at 13:12
If you could help me with keeping `filter` back in the CSS or suggest any other way to apply opacity to the menu, I'd be glad. :) — Pateman, Jul 27 '11 at 13:32

score 2 · Accepted Answer · answered Jul 27 '11 at 14:01

2

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

answered Jul 27 '11 at 14:01

marcnewport

91
10

Matanya · Answer 2 · 2011-12-12T15:04:28.227

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.

Problem with a drop-down menu in IE

2 Answers2