Connecting Tech Pros Worldwide Forums | Help | Site Map

Drop-down menu in IE using Javascript

Newbie
 
Join Date: Sep 2008
Posts: 2
#1: Sep 3 '08
Hello,

I am not at all experienced in Javascript so please bear with me. I'm trying to create a drop-down menu that will work in IE, and trying to use some Javascript code that I got from here. It is supposed to make the menu show up by mouseover. Unfortunately nothing happens (no error codes either) - I don't see the menu when I roll over the title with the mouse (although it works in Firefox, so I know the problem is with the IE-specific Javascript code).

I have found using
Expand|Select|Wrap|Line Numbers
  1. alert(navRoot.childNodes.length);
that it is correctly identifying that there are 6 items in the menu. So it is at least executing the for loop.

Your help in getting this to work would be greatly appreciated - I'm developing a website for a children's charity in Africa if that adds motivation!

Many thanks,
Tom

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4. <script type="text/javascript">
  5. startList = function() {
  6. if (document.all&&document.getElementById) {
  7. navRoot = document.getElementById("nav");
  8. for (i=0; i<navRoot.childNodes.length; i++) {
  9. node = navRoot.childNodes[i];
  10. if (node.nodeName=="LI") {
  11. node.onmouseover=function() {
  12. this.className+=" over";
  13.   }
  14.   node.onmouseout=function() {
  15.   this.className=this.className.replace(" over", "");
  16.    }
  17.    }
  18.   }
  19.  }
  20. }
  21. window.onload=startList;
  22. </script>
  23.  
  24. <style>
  25.  
  26. ul { padding: 0; margin: 0; list-style: none }
  27. li { float: left; position: relative; width: 11em }
  28. li ul { display: none; position: absolute; top: 1em; left: 0 }
  29. li > ul {
  30.     top: auto;
  31.     left: auto;
  32.     }
  33. li:hover ul, li.over ul{ display: block }
  34. </style>
  35.  
  36.  </head> 
  37.  <body>
  38.  
  39.       <ul>
  40.   <li>About WKU
  41.     <ul id="nav">
  42.       <li><a href="">History</a></li>
  43.       <li><a href="">Programs</a></li>
  44.       <li><a href="">Locations</a></li>
  45.       <li><a href="">Sponsors &amp; Supporters</a></li>
  46.       <li><a href="">Staff</a></li>
  47.       <li><a href="">Volunteers</a></li>
  48.         </ul>
  49.     </li>
  50. </ul>
  51. </body>
  52. </html>
  53.  

acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Sep 3 '08

re: Drop-down menu in IE using Javascript


The id should be for the top-most ul.
Newbie
 
Join Date: Sep 2008
Posts: 2
#3: Sep 3 '08

re: Drop-down menu in IE using Javascript


Awesome, thanks a mil! I had tried that before but I think there was another bug at the time.

Quote:

Originally Posted by acoder

The id should be for the top-most ul.

acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Sep 3 '08

re: Drop-down menu in IE using Javascript


You're welcome. Post again if you have more questions.
Reply