View Full Version : CSS hover not working in IE

Sep 29th, 2009, 07:00 PM
I have a navigation menu that is designed in CSS and HTML. One of the links has a hover function that displays a drop down menu when the mouse is over the link. To achieve this I used the following:

.navigation ul ul{


.navigation ul li:hover ul {

The code works fine in Firefox and Safari but when displayed in IE the hover function does nothing. What would the correct code be for this script to be cross-browser compatible?

Sep 29th, 2009, 07:21 PM
Are we talking IE6 here or IE7+. If IE6, then it does not support :hover on elements other than <a>. If that's not the problem, we'll need some more information - can you post a link to your page?

Sep 29th, 2009, 07:51 PM
If IE6, then it does not support :hover on elements other than <a>.

And to add on this: The anchor also needs an href attribute for the hover pseudo-class to work.
But anyway, the solution to get a dropdown menu working in IE 6 is the Son of Suckerfish (http://htmldog.com/articles/suckerfish/dropdowns/).

Sep 29th, 2009, 07:54 PM
sorry I cannot post a link to page. It is not a public site yet. The site would need to be compatible with all browsers including IE6. The following is a little more of a snippet of the website:

<DIV CLASS="navigation">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="services.php">Services </a>
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
<li><a href="contact.php">Contact Us </a></li>

What should I use to reveal the navigation menu. I do not want it to be a pop out menu. I want it to display directly below the text and shift the rest of the menu down.

Sep 29th, 2009, 09:13 PM
You will need JavaScript for this. Something like:

window.onload = function() {
if(document.getElementById('navigation')) {
var li = document.getElementById('navigation').getElementsByTagName('li');
for(i=0;i<li.length;i++) {
li[i].onmouseover = function() {this.className = 'over';}
li[i].onmouseout = function() {this.className = this.className.replace(/over/,'');}

Change the class “navigation” to an ID and apply the following CSS for IE:

#navigation ul .over ul {display: block;}

Sep 30th, 2009, 08:28 PM
I used to Son of a Sucker website referred to in an earlier post. It has the hover working properly but when you go to select an item and leave the primary link the drop down disappears. I think I have everything set up as the website says. I am using the following 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);

I changed my div id to "nav" intstead of "navigation." Any ideas? thanks in advance

Sep 30th, 2009, 08:33 PM
nevermind. everything is working now. the navigation was not disappearing due to a bad java script but because i had a margin set wrong in my css.

this is my final hover css:

#nav ul li.sfhover ul {
position: relative;
top: -5px;

Thanks to all who helped!

Oct 1st, 2009, 03:21 AM
when you think everything works check a different version of IE. All of this script is working fine for firefox, safari, opera, and IE6. But everyone knows IE likes to change things up a little bit in there new updates. Any clue on how to fix this for IE7?

I think it is the javascript this time

Oct 1st, 2009, 04:58 PM

Oct 1st, 2009, 05:40 PM
One problem fixed... another occurs...

The reason the code wasn't working is because IE7 does not support display:none and display:block. I used an absolute position to hide the menu until the li:hover was called upon. IE7 was not supporting the javascript for some reason. The hover works when the mouse is hovering over the primary link. When you try to hover over one of the li submenu items the dropdown disappears because the margin if the li does not read as a part of the menu. If i set the margin to 0 this does not occur. Any reasoning?