Sprite dropdown menu does not work on IE9

[cgull]

Hello,

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">
            <ul>
            <?php
                  if($title == "Home"):
                        echo '<li class="selected"><a href="#" class="home">Home</a></li>';
                    else:
                        echo '<li><a href="' . base_url() . 'main" id="home" class="home">Home</a></li>';
                    endif;

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

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

                    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>
                                    </ul>
                                </li>';

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

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

My css:

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

#menu
{
    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?

[dany12]

try this example and the css reset Let me google that for you

[dany12]

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

[cgull]

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

Thank you