By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,558 Members | 1,603 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,558 IT Pros & Developers. It's quick & easy.

Drop-down menu in IE using Javascript

P: 2
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.  
Sep 3 '08 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
The id should be for the top-most ul.
Sep 3 '08 #2

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

The id should be for the top-most ul.
Sep 3 '08 #3

acoder
Expert Mod 15k+
P: 16,027
You're welcome. Post again if you have more questions.
Sep 3 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.