I'm havving problems with the navigation bar on my website. It uses some css and javascript.
Heres the css code:

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
li {
  float: left;
  position: relative;
  width: 6em;
  background-color: #003366; 
  border-left: .1em #000000 solid;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
width:107px;
padding:.3em;
  }
li ul {
  display: none;
  position: relative; 
  }
li > ul {
 top: .3em;
 left: .0em;
 }
li:hover ul, li.over ul{ display: block; }
.list {
  text-align:left;
  border: none;
  background-color: #DDDDDD;
  width: 10em;
  border: 1px #333333 solid;
  }
.navbar {
width:107px;
background-color:#003366;
padding:.3em;
text-align:center;
color:#FFFFFF;
float: left;
}
.navbar:hover {
width:107px;
background-color:#15548B;
padding:.3em;
text-align:center;
color:#000000;
float: left;
}
.navlink {
color:#FFFFFF;
text-decoration:none;
margin:0;
}
.navlink:hover {
color:#FFFFFF;
text-decoration:none;
margin:0;
}

Here's the Html code:

<ul id="nav">
  <li><a href="http://www.konetchreport.com"><p class="navlink">Home</p></a></li>
  <li><a href="http://www.konetchreport.com/column.php"><p class="navlink">Editor's Column</p></a></li>
  <li><a href="http://www.konetchreport.com/politics.php"><p class="navlink">Politics</p></a>
    <ul>
      <li class="list"><a href="">&raquo; Home</a></li>
      <li class="list"><a href="">&raquo; Articles</a></li>
      <li class="list"><a href="">&raquo; Columnists</a></li>
    </ul>
  </li>
  <li class="navbar"><a href="http://www.konetchreport.com/sports.php"><p class="navlink">Sports</p></a>
    <ul>
      <li class="list"><a href="">&raquo; Home</a></li>
      <li class="list"><a href="">&raquo; Articles</a></li>
      <li class="list"><a href="">&raquo; Columnists</a></li>
      <li class="list"><a href="">&raquo; Live Scores/News</a></li>
    </ul>
  </li>
  <li><a href="http://www.konetchreport.com/funny.php"><p class="navlink">Funny</p></a>
    <ul>
      <li class="list"><a href="">&raquo; Home</a></li>
      <li class="list"><a href="">&raquo; Articles</a></li>
      <li class="list"><a href="">&raquo; Columnists</a></li>
    </ul>
  </li>
  <li><a href="http://www.konetchreport.com/travel.php"><p class="navlink">Travel</p></a>
    <ul>
      <li class="list"><a href="">&raquo; Home</a></li>
      <li class="list"><a href="">&raquo; Articles</a></li>
      <li class="list"><a href="">&raquo; Columnists</a></li>
      <li class="list"><a href="">&raquo; More</a></li>
    </ul>
  </li>
  <li><a href="http://www.konetchreport.com/links.php"><p class="navlink">Links</p></a>
    <ul>
      <li class="list"><a href="">&raquo; Home</a></li>
      <li class="list"><a href="">&raquo; Reviews</a></li>
      <li class="list"><a href="">&raquo; Sites</a></li>
    </ul>
  </li>
  <li><a href="http://www.konetchreport.com/submit.php"><p class="navlink">Submit</p></a>    
    <ul>
      <li class="list"><a href="">&raquo; Home</a></li>
      <li class="list"><a href="">&raquo; Apply for a Column</a></li>
      <li class="list"><a href="">&raquo; Write an Article</a></li>
      <li class="list"><a href="">&raquo; Report a Bug</a></li>
    </ul>
  </li>
</ul>

Heres the Javascript code:

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;

THe problem is whenever you hover over the link the list that display under it moves the text, and disrupts the page. I'm not sure how to fix this and I do not know javascript very well.

If you want to see the page with the problem you can view it at:
http://www.konetchreport.com

And if you need more information just ask. Thanks.

-Alex Konetchy

Try using the suckerfish menu system. It's less complicated than trying to use the JavaScript you're using.

I did. This is the exact copy of what the suckerfish menu is.

No it's not. The JavaScript is different and that's likely what's causing the issue.

Here's the JavaScript for Suckerfish

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);

Also your css doesn't ever use the sfhover class that get's created. The sfhover class is the heart of the suckerfish menu system and it doesn't appear anywhere in your code above.

Ok. I guess you're right. I used the older suckerfish menu version. Thanks for the help.

Regards, Alex Konetchy

I'm sorry for not posting this earlier, but the script that you just gave me doesn't work in IE but works fine in Mozilla. How would you fix that.

Thanks, I used the same code that you gave me in an earlier post. If you need me to show you I can do that.

-Alex Konetchy

Do you mind posting a link to the site? You can send via PM if you don't want to post. When you say it's not working In IE do you mean it's not working at all or is it that the submenus don't appear quite where they should?

Yeah. A link to the site would be http://www.konetchreport.com. In IE the hover function doesn't work. If you want to see an example page:
http://www.konetchreport.com/help

It works fine in FF but the hover function doesn't work. Take a look at the source code.

I'm not seeing anything off in the code. Unless I'm missing something it looks fine. One thing you might need is a doctype for IE. Try adding one to the test page and see if that does the trick.

No, it didn't work. On the older suckerfish menu it used a li.over. Could you add this somehow?

I'm not sure what you're asking. In the new suckerfish it would be .sfhover so li.sfhover.