CSS hover bug in IE and 2 other cliches.

[noize]

I have found other bugs related to using hover is CSS with IE, but I cannot find a fix for my issue. I have checked it in both IE 6 & 7 with the same results.

I have built a drop-down menu using CSS and a touch of Javascript, by combining a couple tutorials I found online. The bug is when you mouse-over the menu in IE, the sub-menu pops out, but will disappear when you mouse-over it, but it doesn't happen everytime. Sometimes, it works fine.

This site is adult related, but there is are no explict images on this page.
http://www.gwenmedia.com/blog/

Here is the code

#nav ul
{
list-style: none;
padding: 0;
margin: 0;
}
 
#nav li
{
float: left;
margin: 0 0em;
}
 
#nav li a
{
background: url(images/background.jpg) #fff bottom left no-repeat;
height: 1.2em;
line-height: 1.2em;
float: left;
width: 9.5em;
display: block;
border: 1px solid #b3b3b3;
color: #ffffff;
font-family: arial;
font-weight: bold;
font-size: 11px;
text-decoration: none;
text-align: center;
}
 
/* Hide from IE5-Mac \*/
#nav li a
{
float: none;
}
/* End hide */
 
 
 
 
#nav li ul {
    position: absolute;
    width: 9em;
    left: -999em;
}
 
#nav li:hover ul {
    left: auto;
 
}
 
#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
 
}
 
#nav li ul ul {
    margin: -1em 0 0 10em;
}
 
 
 
#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none; 
    line-height: 1;
}
 
 
 
#nav li:hover ul, #nav li li:hover ul {
    left: auto;
 
}
 
#nav li:hover a
{
background: url(images/background2.jpg) #fff bottom left repeat-x;
}
 

[html]
<ul id="nav">
<li><a>Main Menu</a>
<ul>
<li><a href="http://www.gwenmedia.com/index2.html">Home Page</a></li>
<li><a href="http://www.gwenmedia.com/news.html">Lastest News</a></li>
<li><a href="http://www.gwenmedia.com/forum/">Forum Page</a></li>
<li><a href="http://www.gwenmedia.com/2257.html">Compliance</a></li>
</ul>
</li>

<li><a>Tour</a>
<ul>
<li><a href="http://www.gwenmedia.com/tour.html">Take A Tour</a></li>
<li><a href="http://www.gwenmedia.com/latest.html">Lastest Updates</a></li>
<li><a href="http://www.gwenmedia.com/aboutus.html">About GwenMedia</a></li>
<li><a href="http://www.gwenmedia.com/models.html">Our Models</a></li>
<li><a href="http://www.gwenmedia.com/join.html">Join Now</a></li>
</ul>
</li>

<li><a>Members</a>
<ul>
<li><a href="http://www.gwenmedia.com/members/photos1.html">Photo Galleries</a></li>
<li><a href="http://www.gwenmedia.com/members/videoclips.html">Video Clips</a></li>
<li><a href="http://gwenmedia.com/members/stories.html">Fetish Stories</a></li>
<li><a href="http://gwenmedia.com/members/v_o_d.html">Video on Demand</a></li>
</ul>
</li>

<li><a>Store</a>
<ul>
<li><a href="http://www.gwenmedia.com/catalog/">Online Store</a></li>
</ul>
</li>

<li><a>On Demand</a>
<ul>
<li><a href="http://gwenmedia.com/ondemand.html">Video On Demand</a></li>
</ul>
</li>

<li><a>Links</a>
<ul>
<li><a href="http://www.gwenmedia.com/toplist/">Toplist</a></li>
<li><a href="http://www.gwenmedia.com/girlfriends.html">Girlfriends</a></li>
<li><a href="http://www.gwenmedia.com/links.html">Links</a></li>
<li><a href="http://www.gwenmedia.com/ourbanners.html">Our Banners</a></li>
</ul>
</li>

<li><a>Join</a>
<ul>
<li><a href="http://www.gwenmedia.com/join.html">How to Join</a></li>
</ul>
</li>

<li><a>Contact</a>
<ul>
<li><a href="http://www.gwenmedia.com/contactus.html">Contact Us</a></li>
<li><a href="http://www.gwenmedia.com/forum/">Requests</a></li>
<li><a href="http://www.gwenmedia.com/contactus.html">Report Problem</a></li>
</ul>
</li>



</ul>
[/html]

 
<script type="text/javascript">
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
 

Here are two other smaller issues with the same menu system.

When mousing over the menu, the background is supposed to change to a light grey image. It works in Mozilla and Safari, but not in IE.

Last is when mousing over the menu is Safari on a Mac, some of the text is cut off from one of the items in the sub-menu.

Any help would be super appreciated!

[drhowarddrfine]

Please validate and fix your 52 html errors and two css errors.

[noize]

Ok, so now my style sheet is clean, and I have the HTML as clean as I can get it. I am still having the same problems as before.

Any advice anyone? Please. =)

[drhowarddrfine]

:hover does not work in IE except on <a> elements.