CSS Menu disappears when trying to mouse over in IE 8 in compatibility mode

Question

I have created a drop down menu with CSS which works great in Firefox, Chrome and IE8, but fails when when in IE8 compatibility mode. When you try to mouse over the drop down menu, it disappears. You can see this issue in action at: http://chocolat.digitaldementia.ca/chocolat. I have spent the last 4 days trying to find a fix for this problem but have been unsuccessful so far.

The CSS code looks like the following:

#nav {
    padding: 0;
    margin: 0;
    list-style: none;
    height: 41px;
    /*background: url(images/menuitembackground.jpg) repeat-x;*/
    position: relative;
    z-index: 500;
    font-family: arial, verdana, sans-serif;
}

#nav li.top {
    display: block;
    float: left;
    height: 41px;
}

#nav li a.top_link {
    display: block;
    float: left;
    height: 40px;
    line-height: 34px;
    color: #ffe09a;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    padding: 0 0 0 15px;
    cursor: pointer;
    /*background: url(images/menuitembackground.png) no-repeat;*/
}

#nav li a.top_link span {
    float: left;
    display: block;
    padding: 0 24px 0 12px;
    height: 40px;
    /*background: url(three_0.gif) right top no-repeat;*/
}

#nav li a.top_link span.down {
    float: left;
    display: block;
    padding: 0 24px 0 12px;
    height: 40px;
   /* background: url(images/menuitembackground.png) no-repeat right top;*/
}

#nav li:hover a.top_link {
    color: #fff;
    background: url(images/menuitembackground.png) no-repeat left top;
}

#nav li:hover a.top_link span {
    background: url(images/menuitembackgroundright.png) no-repeat right top;
}

#nav li:hover a.top_link span.down {
    background: url(images/menuitembackgroundright.png) no-repeat right top;
}

/* Default list styling */
#nav li:hover {
    position: relative;
    z-index: 200;
}

#nav li:hover ul.sub {
    left: 1px;
    top: 40px;
    background: #f5d585;
    padding: 3px;
    border: 1px solid #dfbc6b;
    white-space: nowrap;
    width: 140px;
    height: auto;
    z-index: 300;
    -moz-box-shadow: 5px 5px 7px #663725;
    -webkit-box-shadow: 10px 10px 5px #663725;
    box-shadow: 10px 10px 5px #663725;
}

#nav li:hover ul.sub li {
    display: block;
    height: 20px;
    position: relative;
 margin: 0;
 padding: 0;
    float: left;
    width: 100%;
    font-weight: normal;
}

#nav li:hover ul.sub li a {
    display: block;
 padding: 0px 5px 0px 5px;
    font-size: 11px;
    height: 18px;
    width: auto;
    line-height: 18px;
 text-align: left;
    /*text-indent: 5px;*/
    color: #723f2e;
    text-decoration: none;
}

#nav li ul.sub li a.fly {
    background: #bbd37e url(arrow.gif) 80px 6px no-repeat;
}

#nav li:hover ul.sub li a:hover {
    background: #c89948;
    color: #fff;
}

#nav li:hover ul.sub li a.fly:hover {
    background: #6a812c url(arrow_over.gif) 80px 6px no-repeat;
    color: #fff;
}

#nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {
    left: 90px;
    top: -4px;
    background: #bbd37e;
    padding: 3px;
    border: 1px solid #5c731e;
    white-space: nowrap;
    width: auto;
    z-index: 400;
    height: auto;
}

#nav ul, #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

#nav li:hover li:hover a.fly, #nav li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover li:hover a.fly {
    background: #6a812c url(arrow_over.gif) 80px 6px no-repeat;
    color: #fff;
    border-color: #fff;
}

#nav li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li:hover li a.fly {
    background: #bbd37e url(arrow.gif) 80px 6px no-repeat;
    color: #000;
    border-color: #bbd37e;
}

The HTML is your typical list structure:

<div id ="menucontainer">
<div id ="menuList">
<ul id="nav">
<li class="top">
<a href="#" class="top_link"><span class="down">Welcome</span></a>
</li>
<li class="top">
<a href="#" id="products" class="top_link"><span class="down">Treats</span></a>
<ul class="sub">
<li>
<a href="#">Chocolates</a>
</li>
<li>
<a href="#">Coffees</a>
</li>
<li>
<a href="#">Baked Goods</a>
</li>
<li>
<a href="#">Gelato</a>
</li>
<li>
<a href="#">Light Menu Items</a>
</li>
</ul>
</li>
<li class="top">
<a href="#" id="locations" class="top_link"><span class="down">Locations</span></a>
<ul class="sub">
<li>
<a href="#">3rd Avenue Cafe</a>
</li>
<li>
<a href="#">Massey Drive Cafe</a>
</li>
<li>
<a href="#">Mobile Cafe</a>
</li>
</ul>
</li>
<li class="top">
<a href="#" class="top_link"><span class="down">About</span></a>
</li>
<li class="top">
<a href="#" class="top_link"><span class="down">Contact</span></a>
</li>
</ul>
</div>
</div>

Sorry I can't get the CSS to format correctly in this thing.

If anyone can solve my problem for me, it would be greatly appreciated!

Thanks

Answer 1

li:hover

will not work under IE There are several workaround for this, google it!

http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=LI+Hover+IE