Can't hide element properly...

[fdgsogc]

I am creating a menu and submenu (vertical tree) using scripts like this with classnames and ids:

/* Shows subcategories  */
	function ShowSubcatories1(maincat1) {
	document.getElementById('subcat1').style.display = "block";
	}

/* Hides subcategories */
	function HideSubcategories1(maincat1) {
	document.getElementById('subcat1').style.display = "none";
	}

These scripts are repeated for each menu item.

I then use mouseover and mouseout to launch the scripts. Everything works fine.

PROBLEM:
I can't hide the last submenu selected. Once the user moves away from the menu, the last submenu moused over stays open.

I tried to use the Hide subcategories script on the parent DIV tag (ie, when the user mousesout of the parent div tag) but for some reason the cursor can see the parent div tag when floating between the children (submenu) div tags and so it no longer allows for the submenu to become visible.

Any ideas how to reset all elements to same values as when page loads?

 

[trollacious]

In your functions, there's a parameter passed called maincat1, but it's never refered to in the function. What is its purpose?

As well, you should use one show function and one hide function for everything, not one function for each ID.

Lee

 

[fdgsogc]

I use one show and hide for each ID. I was just simplifying because I am using ColdFusion to dynamically generate the ID codes.

You may be right. It may be redundant. I am not a very experienced programmer. Here is my statement calling the function.

<dt class="catrow" id="cat1" onMouseOver="ShowSubcatories1('maincat1'),this.className='catrowhover'">