Forum Moderators: not2easy
I'm not sure what I'm doing wrong, I've stripped this down to bare bones and this simple Suckerfish Menu STILL won't work in IE. Moz shows it fine but for SOME reason, I get nothing in IE (and don't seem to get any JS errors either?!). Please for the love of God tell me what I've done here!
index.php---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<script language="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("jsnav");
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;
</script>
</head>
<body>
<ul id="jsnav">
<li class="nav-li" id="li-id"><a href="home">Home</a></li>
<li class="nav-li" id="li-id"><a href="about">About</a>
<ul>
<li class="dropdown"><a href="">About1</a></li>
<li class="dropdown"><a href="">About2</a></li>
<li class="dropdown"><a href="">About3</a></li>
<li class="dropdown"><a href="">About4</a></li>
</ul>
</li>
<li class="nav-li" id="li-id"><a href="products">Products</a>
<ul>
<li class="dropdown"><a href="">Prod1</a></li>
<li class="dropdown"><a href="">Prod2</a></li>
<li class="dropdown"><a href="">Prod3</a></li>
<li class="dropdown"><a href="">Prod4</a></li>
</ul>
</li>
<li class="nav-li" id="li-id"><a href="services">Services</a>
<ul>
<li class="dropdown"><a href="">Serv1</a></li>
<li class="dropdown"><a href="">Serv2</a></li>
<li class="dropdown"><a href="">Serv3</a></li>
<li class="dropdown"><a href="">Serv4</a></li>
<li class="dropdown"><a href="">Serv5</a></li>
<li class="dropdown"><a href="">Serv6</a></li>
<li class="dropdown"><a href="">Serv7</a></li>
<li class="dropdown"><a href="">Serv8</a></li>
</ul>
</li>
<li class="nav-li" id="li-id"><a href="solutions">Solutions</a>
<ul>
<li class="dropdown"><a href="">Sol1</a></li>
<li class="dropdown"><a href="">Sol2</a></li>
<li class="dropdown"><a href="">Sol3</a></li>
<li class="dropdown"><a href="">Sol4</a></li>
<li class="dropdown"><a href="">Sol5</a></li>
</ul>
</li>
<li id="li-id"><a href="contact">Contact Us</a></li>
</ul>
</body>
</html>
test.css---
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 10em;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{ display: block; }
Sorry for posting the entire code, I'm just not sure where I've gone wrong...don't have a clue?!
PLEASE put me out of my misery here! Thanks in advance!
I don't know where the js in your above post is faulty but the SF javascript I have on file is different and using it makes it work properly in IE.
sfHover = function() {
var sfEls = document.getElementById("jsnav").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);
just change the red bit to your UL ID.
Also note that in the Suckerfish CSS:
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul {
top: auto;
left: auto;
}
the
li > ul
<style type="text/css">
li ul {
display: none;
position: absolute;/* for all non IE browsers */
top: auto;
left: auto;
}
</style><!--[if IE]>
/* for IE/Win Only */
<style type="text/css" media="screen">
li ul {
top: 1em;
left: 0;
}
</style>
<![endif]-->
Suzy
