Submeus do not vanish


I have site that I have inherited. The submenus do not vanish when I move the cursor from the main menu. I have to bring the mouse inside the submenu and out again for it to vanish.

I am sure this is a known problem, and there is a solution out there for this.



I found the issue.
in your html, your nav looks like this:

<div id="navigation">
          <li><a href="index.htm" target="_self" class="selected">Home</a></li>
          <li><a href="#" target="_self" onmouseover="MM_showHideLayers('dropdown','','show')">Profile</a></li>
          <li><a href="#" target="_self" onmouseover="MM_showHideLayers('dropdown2','','show')">Services</a></li>
          <li><a href="#" target="_self" onmouseover="MM_showHideLayers('dropdown3','','show')">Clients</a></li>
          <li><a href="#" target="_self" onmouseover="MM_showHideLayers('dropdown4','','show')">News</a></li>

          <li><a href="contact_us.htm" target="_self">Contact Us</a></li>

You have onmouseover to start all your dropdowns, but no onmouseout to hide them. Your onmouseouts are all on your dropdown lists. That’s why you have to hover over the list and then activate its onmouseout.

The way you have this structured, you won’t easily be able to accomplish your task because if you simply add your onmouseout event to the nav items then as soon as you go to hover over your dropdowns the nav onmouseouts will fire and your list will be gone.

Your nav will need to be rebuilt if you want to avoid really tricky javascript.

I suggest using this tutorial:

it will show you how to create a dropdown menu that works in all browsers without javascript except IE6.
IE6 will work with this menu system with a very small amount of javascript.

Whatever you decided to do, good luck!

Now, I’m gonna be bold and take a stab at making that code more legible and tweaking it somewhat…

I have tried to understand what the code does, and rewritten parts based on that. If I have misunderstood the code, this probably isn’t gonna help, but anyway…

function MM_showHideLayers() {
    var i
        , v
        , obj;
    for (i = 0; i < (arguments.length - 2); i += 3) {
        obj = document.getElementById(arguments[i])
        if (obj != null) {
            v = arguments[i + 2];
            if (v == 'show') {
       = 'visible';
            else if (v == 'hide') {
       = 'hidden';

I threw out the checks for and document.getElementById. It seems like this is some very old code, if those checks where needed, but please correct me if I’m wrong!

I also put in explicit blocks to make the code easier to read, as well as made other changes.

Please feel free to point out any mistakes I made!

PS. The p variable wasn’t used at all(?)


The site is

Teh code is - <script type=“text/javascript”>
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if ( {; v=(v==‘show’)?‘visible’:(v==‘hide’)?‘hidden’:v; }
obj.visibility=v; }



This part looks really weird to me:

v=(v=='show')?'visible': (v=='hide')?'hidden':v;

Can you really do an if/elseif/else with the ternary operator?

Try doing this instead:

if (v == 'show') {
    v = 'visible';
else if (v == 'hide') {
    v = 'hidden';

It would be necessary to see the code or the site to offer any assistance.