I have a sprite dropdown menu that works fine everywhere besides IE9. In IE9 the menu just doesn't drop.

I have search the net for 2 days trying to find a solution with no success.

My html code:

<div id="nav">
        <div id="menu">
                  if($title == "Home"):
                        echo '<li class="selected"><a href="#" class="home">Home</a></li>';
                        echo '<li><a href="' . base_url() . 'main" id="home" class="home">Home</a></li>';

                    if($title == "About Us"):
                        echo '<li class="selected"><a href="#" class="about">About Us</a></li>';
                        echo '<li><a href="' . base_url() . 'main/about" class="about">About Us</a></li>';

                    if($title == "Our Coffees"):
                        echo '<li class="selected"><a href="#" class="coffee">Our Coffees</a></li>';
                        echo '<li><a href="' . base_url() . 'main/ourcoffees" class="coffee">Our Coffees</a></li>';

                    echo '<li><a href="#" class="order">Order Online</a>
                                    <ul id="subNav">
                                        <li><a href="' . site_url() . 'orderonline">Coffee</a></li>
                                        <li><a href="' . site_url() . 'orderonline/books">Books</a></li>

                    if($title == "Gallery"):
                        echo '<li class="selected"><a href="#" class="gallery">Gallery</a></li>';
                        echo '<li><a href="' . base_url() . 'main/gallery" class="gallery">Gallery</a></li>';

                    if($title == "Contact Us"):
                        echo '<li class="selected"><a href="#" class="contact">Contact Us</a></li>';
                        echo '<li><a href="' . base_url() . 'contact" class="contact">Contact Us</a></li>';
        </div><!-- end nav -->

My css:

#nav {
    float: right;
    z-index: 100;
    width: 735px;
    height: 81px;
    position: relative;

    clear: both;
    margin-top: 23px;

#menu ul { list-style: none; }

#menu ul li
    float: left;

/*menu-styling ] on / hover states [*/
#menu ul li a
    background: transparent url(../images/menu.png) repeat scroll 0 0;
    height: 81px;
    text-decoration: none;
    display: block;

#menu ul li a.home{width: 83px; text-indent: -99999px;}  
#menu ul li a.home:hover{background-position: 0 -81px; }
#menu ul li.selected a.home {background-position: 0 -162px;}

#menu ul li a.about
    width: 122px;
    background-position: -83px 0;
    text-indent: -99999px;
#menu ul li a.about:hover { background-position: -83px -81px; }
#menu ul li.selected a.about { background-position: -83px -162px; }

#menu ul li a.coffee
    width: 155px;
    background-position: -205px 0;
    text-indent: -99999em;
#menu ul li a.coffee:hover { background-position: -205px -81px; }
#menu ul li.selected a.coffee { background-position: -205px -162px; }

#menu ul li a.order{
    width: 160px;
    background-position: -360px 0;
    text-indent: -99999px;
#menu ul li a.order:hover{background-position: -360px -81px;}  
#menu ul li.selected a.order{background-position: -360px -162px;}

#menu ul li a.gallery
    width: 98px;
    background-position: -520px 0;
    text-indent: -99999px;
#menu ul li a.gallery:hover { background-position: -520px -81px; }
#menu ul li.selected a.gallery { background-position: -520px -162px; }

#menu ul li a.contact
    width: 117px;
    background-position: -618px 0;
    text-indent: -99999px;
#menu ul li a.contact:hover { background-position: -618px -81px; }
#menu ul li.selected a.contact { background-position: -618px -162px; }

/*Sub nav Menu div*/
#menu UL LI UL
    background: #000 none no-repeat top;
    background: rgb(0, 0, 0, 8) transparent;
    /* RGBa with 0.3 opacity */
    background: rgba(0, 0, 0, 0.8);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000, endColorstr=#30000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000, endColorstr=#30000000"; 
    width: 150px;
    position: absolute;
    border: 1px solid #C1C1C1;
    border-top: none;
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    clear: both;
    overflow: hidden;
    margin-left: -1px;
    display: none;
#menu UL LI UL LI
    padding: 0;

#menu ul li ul li a
    background: none;
    padding-bottom: 10px !important;
    height: auto;
    padding: 10px 0 0 5px;
    width: 150px;
    display: block;
    border-bottom: 1px solid #ccc;
    color: #fff;
    font-weight: bold;
    font-size: 14px;

#menu UL LI UL LI A:hover {
    background-color: #C60;

I noticed that if I remove the Display: none; from #menu UL LI UL it works, but then the dropdown menu is visible when the page is loaded when it should be visible only on hover of the parent menu item.

Can someone please help?

Recommended Answers

All 3 Replies

#menu UL LI UL Li{visibility:hidden;}
#menu UL LI UL:hover{visibility:visible;}
Try this maybe it would do the trick you are after.

Didn't get your responses by email but thank you.
Found the solution today:
Added visibilty: visible; on #menu ul li ul

Thank you

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.