New scripting problem with my website - only with IE7 - help?

[Raider]

My website works fine with IE6 or Firefox, but since I've installed IE7 the menu no longer works properly.

The website is here: www.moviepostercollector.co.uk

The menu on the left is layered in a simple table way. The menu bit is like a list. When you hover over the first option, the second menu pops up then you can select an item from the second menu. In IE7 when you get onto that second menu, as soon as you try and select something other than the first option it closes!

<div id="leftcontent">
<h1>Menu</h1>

<ul id="nav"> 
  <li><a href="index.html">News</a></li> 

  <li><a href="types_posters.html">Types of Posters</a> 
    <ul> 
      <li><a href="us_posters.html">US Posters</a></li>  
      <li><a href="eu_posters.html">European Posters</a></li> 
      <li><a href="other_posters.html">Other Posters</a></li> 
    </ul> 
  </li> 

 <li><a href="forum.html">Forum</a></li> 

<ul> 

</div>

The Java:

// JavaScript Document

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;

I'm useless at coding. So does anyone know why IE7 doesn't like this? Ta

 

[Augmented]

So does anyone know why IE7 doesn't like this? Ta

That JS is replicating CSS functionality left out of IE6 hover on anything other than <a> elements).

IE7 doesn't need it, but it is still loaded in IE7. So, you'll need to serve it just to IE6 and below and make IE7 ignore it. To do this, change where you're linking the script to:

<!--[if lt IE 7]>
  <script type="text/javascript" src="menu.js"></script>
<![endif]-->

That is a conditional comment for IE only. Should work - untested - unless that menu code is required for anything other than IE.

 

[Raider]

That JS is replicating CSS functionality left out of IE6 hover on anything other than <a> elements).

IE7 doesn't need it, but it is still loaded in IE7. So, you'll need to serve it just to IE6 and below and make IE7 ignore it. To do this, change where you're linking the script to:

<!--[if lt IE 7]>
  <script type="text/javascript" src="menu.js"></script>
<![endif]-->

That is a conditional comment for IE only. Should work - untested - unless that menu code is required for anything other than IE.

I just tried this, and it made no difference. Still works in IE6 / FF. But not in IE7.

Any other ideas? Ta

EDIT: Just noticed on the menu, that it almost works for one part:

Types of Posters - US Posters
Types of Posters - EU Posters

But it fails for:

Types of Posters - Other Posters

But for ALL the other 1st level menu options, only the first option in the 2nd level works. Odd..

 

[Raider]

Any other ideas? I'm still stuck on this

 

[Raider]

Bump bump?

I've still got this problem. Any ideas? Somebody must know!
If nobody can fix the menu, then can somebody suggest a better way of coding it?