IE Menu Issues

kb posted this at 15:02 — 8th July 2004.

Joined: Feb 2002

Hey...

I'm building a menu for a new site, and theres a piece of JS that gets it to work (modeled of of the Suckerfish Dropdown from alistapart.com). It does rollover, but refuses to disappear when mouseout.

Here's the script:

&lt;script type="text/javascript" language="Javascript"&gt;
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
&lt;/script&gt;

I don't know too much about JS, so could someone help me out here? How do I get it to disappear on mouseout?

You can view an example (that is currently being worked on) at http://dime64.dizinc.com/~ttots/menu.html (until my domain gets processed)

Thanks

AyntRyte posted this at 23:21 — 8th July 2004.

He has: 145 posts

Joined: Jun 2004

Check the source code for the example at:
http://www.htmldog.com/articles/suckerfish/bones/
There's a difference in the java tag. It works in IE, but the mouseout seems a little slow.

\\// Robert

The grass is always greener on the other side -- but that's because they use more manure.

kb posted this at 15:19 — 9th July 2004.

He has: 1,380 posts

Joined: Feb 2002

Awesome...it doesn't hang up anymore

Now I've still got an issue to deal with with IE:
[indent]The submenus don't position correctly[/indent]

The style for the menu is:

ul {
margin: 0;
padding: 0;
list-style: none;
}

ul li {
float: left;
position: relative;
width: 120px;
text-align: left;
}

ul li ul {
position: absolute;
display: none;
background-color: #cccccc;
left: 25px;
}

ul li ul li {
text-align: left;
margin-left: 3px;
border-bottom: 1px solid #000000;
}

li > ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul {
display: block;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

kb posted this at 15:48 — 9th July 2004.

He has: 1,380 posts

Joined: Feb 2002

Nevermind...i changed the orientation to vertical, and it fixed my problems.

Thanks though