How to make menu still selected when it's no longer hovered?

Hi everyone,

I have a new website over at topelectronicreview.com and I try to figure out how to make category menu (horizontal) stays selected even when it's not hovered. I attach a screenshot to illustrate the menu behavior I intend to achieve.

When I hover on the main menu (i.e. "car electronics"), it's selected and the sub menu shows up as well. However, when I move my cursor over the sub menu, the main menu is no longer selected.



Menu behaviour that I want to achieve

1. When I move my cursor over the sub menus, the associated main menu should stay selected.

2. One flaw that I notice is the sub menu is pretty small, so when I accidentally move the cursor outside the sub menu, the sub menu disappears. The main menu and the sub menus should stay selected regardless of the cursor whereabouts (unless I hover on other main menu)

Here's the js code

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;

Code (markup):

html structure

<div id="nav-wrap"><ul id="navbar"><?php wp_list_categories('exclude=21,41&show_count=0&title_li='); ?></ul></div>

HTML:

CSS code

#nav-wrap {
	position: relative;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	padding: 0px 15px;
	margin: 0 auto; 
	height: 75px;
	background: url(images/nav-wrap1.jpg) repeat-x;
	text-align: center;
}

#navbar {
	position: relative;
	margin: 0 0 0 -15px;
	padding: 0;
	height: 43px;
	line-height: 43px;
	text-align: center;
	font-weight: bold;
}
#navbar li {
	list-style: none;
	float: left;
	font-weight: bold;
}
#navbar li a {
	display: block;
	padding: 0px 14px 0px 10px;
	text-decoration: none; 
	color: #042842;
	font-size: 11px;
        text-transform:uppercase;
	font-weight: bold;
}
#navbar li a:hover {
	color: #91e8fb; 
        background:#15669b;
}
#navbar li ul {
	display: none; 
}
#navbar li:hover ul, #navbar li.hover ul {
	position: absolute;
	display: inline;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
        font-size:11px;
	height: 32px;
	line-height: 32px;
	font-weight: bold;
}
#navbar li:hover li, #navbar li.hover li {
        float:left;
}
#navbar li:hover li a, #navbar li.hover li a {
	color: #FFF;
	font-size: 10px;

}
#navbar li li a:hover {
	color: #FFF;
}

Code (markup):

I know google is our best friend, but I have no idea what to look for. If anybody can enlighten me on how to do this (pointing me some references), I would be able to figure out myself.

Any ideas?

Thanks in advance

 

You'll need to redo the code to support that feature, here are some examples:

http://users.tpg.com.au/j_birch/plugins/superfish/#examples (look at nav-bar style)
http://www.kalsey.com/tools/csstabs/

 

Yea just use superfish menu from first link GWiz gave you. Its easy to setup and do what you want.

btw your site is not loading for me.

 

Just remove this section from the code -

This should do it all.

 

Thanks guys! It works wonders Just need a little tweak and currently working out the compatibility issue between featured content gallery (FCG) and the superfish