Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Internet Explorer CSS hover not working in IE

    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:

    Code:
    .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?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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?

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    Quote Originally Posted by SB65 View Post
    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.

  • Users who have thanked VIPStephan for this post:

    jmassey09 (09-29-2009)

  • #4
    New Coder
    Join Date
    Oct 2008
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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.
    Last edited by jmassey09; 09-29-2009 at 06:56 PM.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    You will need JavaScript for this. Something like:
    Code:
    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:

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

  • #6
    New Coder
    Join Date
    Oct 2008
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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

  • #7
    New Coder
    Join Date
    Oct 2008
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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:
    Code:
    #nav ul li.sfhover ul {
    	position: relative;
    	padding:0px;
    	left:30px;
    	top: -5px;
    	margin:0px;
    }
    Thanks to all who helped!

  • #8
    New Coder
    Join Date
    Oct 2008
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Internet Explorer

    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

  • #9
    New Coder
    Join Date
    Oct 2008
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    **bump**

  • #10
    New Coder
    Join Date
    Oct 2008
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •