'pure css menu' hover problems with explorer

[nateuni]

Guys,

Finished a kick ass assignment, checked it on all available browsers on my mac, all good, so I submitted.

Then I was over my misses mate's house and looked at it on windows and there are menu hover issues in Explorer. I have been looking and looking but I can't seem to find a clear fix.

Anyone know non-javascript way to fix this?

Here is the html and css snippets -

<div id="nav">
      <ul>
        <li class="first"><a href="index.html">Home</a></li>
        <li><a href="trainer/aboutus.html">About Us</a></li>
        <li><a href="trainer/psychology.html">Psychology</a>
          <ul>
            <li><a href="trainer/new_to_gym.html">New to Gym?</a></li>
            <li><a href="trainer/committed.html">Are you Committed?</a></li>
            <li><a href="trainer/fad.html">Just a Fad?</a></li>
            <li><a href="trainer/scared.html">But the gym seems a bit scary!</a></li>	    
          </ul>
        </li>
        <li><a href="trainer/faqs.html">FAQ's</a>
          <ul>
            <li><a href="trainer/muscle_to_fat.html">Muscle turning to Fat?</a></li>
            <li><a href="trainer/big.html">I don't want to be big!</a></li>
            <li><a href="trainer/crunches.html">Crunches for Abs?</a></li>
            <li><a href="trainer/weights.html">Why weights?</a></li>
          </ul>
        </li>
        <li><a href="trainer/programming.html">Programming</a>
          <ul>
            <li><a href="trainer/contraction_basics.html">Contraction Basics</a></li>
            <li><a href="trainer/program_basics.html">Program Basics</a></li>
            <li><a href="trainer/how_to_progress.html">How to make progress</a></li>
            <li><a href="trainer/links.html">Links for Advanced Trainees</a></li> 
          </ul>
        </li>
        <li><a href="trainer/contact.html">Contact Us</a></li>
      </ul>
    </div> <!-- end #nav -->

*{ margin:0px; padding: 0px; }

#nav {
	font-family: arial, sans-serif;
	position: relative;
	width: 798px;
	height:31px;
	font-size:13px;
	font-weight:bold;
	color:#000000;
	margin: 0 auto;
	background-repeat:repeat-x;
	background:#92a7b9;
	border-bottom: 1px solid #f2f2f2; /*top white border here*/
	border-top: 1px solid #f2f2f2; /*bottom white border here*/
}

#nav ul {
	list-style-type: none;
}

#nav ul li {
	float:left;
	position: relative;
}

#nav ul li a {
	text-align: center;
	padding:8px;
	display:block;
	text-decoration:none;
	color:#ffffff;
	width: 117px;
}

#nav ul li a:hover {
	color:#000;
}

#nav ul li ul {
	display: none;
}

#nav ul li:hover ul {
	display: block;
	position: absolute;
	color:#000;
}/* drop down menu options */

#nav ul li:hover ul li a {
	display:block;
	background:#000000;
	color:#ffffff;
	width: 117px;
	text-align: center;
	border-bottom: 1px solid #f2f2f2;
	border-right: 1px solid #f2f2f2;
	border-left: 1px solid #f2f2f2;
	
}

#nav ul li:hover ul li a:hover {
	background:#92a7b9;
	color:#000;
}

[ko ko]

IE 6 and older can't understand li:hover function. You need a script for this function. Here is js.

navHover = function() { 
var lis = document.getElementById("nav-menu").getElementsByTagName("LI");	
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";		}
lis[i].onmouseout=function() {			
this.className=this.className.replace(new RegExp(" iehover\\b"), "");		}	} }
if (window.attachEvent) window.attachEvent("onload", navHover);

You need to pay the unique id to your main ul tag. The script get the ul tag using DOM object. Here it is:

document.getElementById("nav-menu")

The text shown with red color is the id of the ul. And get this in your HTML head section.

<!-[if gte IE 6]>
<script type="text/javascript" src="ie.js"></script>
<![endif]->

Good luck.

[nateuni]

Thanks, I will try that out now.

I am also having issues in IE8. The menu pops down then when i go to mouse over it disappears. I can flicker the mouse quickly back and forth to kind of catch it. Why would this happen in IE8?

Regards,
Nate

[ko ko]

This is because you floated the li tags from parent ul. So, it force it all child li to float. So you need to break float for the child li tag. Here

#nav ul ul li {
       float: none
}

It would work. And puts doctype in your html.