...

View Full Version : CSS hover not working in IE



jmassey09
09-29-2009, 06: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{
display:none;
position:relative;
padding:5px;
left:10px;
top:-3px;

}

.navigation ul li:hover ul {
display:block;
}


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?

SB65
09-29-2009, 06: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?

VIPStephan
09-29-2009, 06: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/).

jmassey09
09-29-2009, 06: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">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="services.php">Services </a>
<ul>
<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>
</ul>
</li>
<li><a href="contact.php">Contact Us </a></li>
</ul>
</div>


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.

VIPStephan
09-29-2009, 08: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;}

jmassey09
09-30-2009, 07: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

jmassey09
09-30-2009, 07: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;
padding:0px;
left:30px;
top: -5px;
margin:0px;
}


Thanks to all who helped!

jmassey09
10-01-2009, 02: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

jmassey09
10-01-2009, 03:58 PM
**bump**

jmassey09
10-01-2009, 04: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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum