Drop Down Menu not working in IE

Discussion in 'JavaScript' started by blueparukia, Oct 18, 2007.

  1. #1
    I am using this tutorial to make a suckerfish menu, but it doesn't work in IE7 - when you hover over the first leverl, the menu drops down, but doesn't disappear when you leave it. As it works fine on Opera, Firefox and Safari, I know this is a JavaScript issue, or maybe I missed something in the CSS.

    My HTML
    
    <ul id="nav">
    	<li><a class="toplink" href="#">Home</a>
    		<ul>
    			<li><a href="#">Remoras</a></li>
    			<li><a href="#">Tilefishes</a></li>
    			<li><a href="#">Bluefishes</a></li>
    			<li><a href="#">Tigerfishes</a></li>
    		</ul>
    	</li>
    
    	<li><a class="toplink" href="#">Support</a>
    		<ul>
    			<li><a href="#">Climbing perches</a></li>
    			<li><a href="#">Labyrinthfishes</a></li>
    			<li><a href="#">Kissing gouramis</a></li>
    			<li><a href="#">Pike-heads</a></li>
    			<li><a href="#">Giant gouramis</a></li>
    		</ul>
    	</li>
        <li><a class="toplink" href="#">Forums</a></li>
    </ul>
    
    HTML:

    My JavaScript (contained in a separate js file, and included in the header):
    
    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);
    Code (markup):
    And associated CSS (have modified the default):
    
    ul#nav
    {
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    width:800px;
    display: block;
    }
    
    ul#nav
    {
    padding-top:40px;
    padding-left:10px;
    padding-right:10px;
    }
    
    #nav, #nav ul {
    	padding: 0;
    	margin:0;
    	list-style: none;
    	height: 30px;
    }
    
    #nav a {
    	display: block;
    	width: 10em;
    	height:26px;
    }
    
    #nav a.toplink:hover {
    	background:url(images/menubg2.png)
    }
    
    #nav li {
    	float: left;
    	width: 10em;
    	height:30px;
    	text-align:center;
    	
    }
    
    #nav li ul {
        text-align:center;
    	position: absolute;
    	width: 10em;
    	left: -999em;
    }
    
    #nav li:hover ul {
    	left: auto;
    }
    
    #nav li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    
    
    #nav li ul li:hover a
    {
    color:#CC0000
    }
    
    Code (markup):
    What is causing this error. I am running on localhost,

    BP
     
    blueparukia, Oct 18, 2007 IP
  2. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #2
    Nevermind anymowre, I'm not gonna use it

    BP
     
    blueparukia, Oct 19, 2007 IP