To get the previous menus to stay highlighted while the submenu is active and then to go back when you mouseOff - change the code that sets the onmouseover and onmouseoff functions like this:

ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
this.style.backgroundColor = "Highlight";
this.getElementsByTagName("a")[0].style.color = "HighlightText";
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
this.style.backgroundColor = "Menu";
this.getElementsByTagName("a")[0].color = "MenuText";
}

You can change the text color and background colors to anything you want.

Hi,
I am new to this and need help.
I used the above code & customized it a bit.
In IE7 my 2nd level menu is not accessible. It shows but disappears the moment I move my cursor. It works beautifully in FF/Mozilla.
Here is the CSS code: (I used the JAvascript - did not make any changes)

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 150px; /* Width of Menu Items */
font-size: 1em;
}

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 160px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: #F0ECB9; /* text color - sand*/
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 2px 4px;
/*border: 1px solid #24563d;*/
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: #FFFFFF;
}

.suckerdiv ul li a:hover{
color:#0033CC;
text-transform: uppercase;
font-stretch:wider;
font-weight:bolder;
background: #F0ECB9; /* unfortunately only the links area changes the bkg color - not the whole box read www.xs4all.nl/~peterned/csshover.html */
}

.suckerdiv .subfolderstyle{
background: url(images/arrow-list02.gif) no-repeat center right;
}


/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

#suckertree1 li {
padding: 0 0 17px 0; /* top rt, bottom, left */
background: url(images/btnTemplate02.jpg) no-repeat; /* background-image does not work */
font-family:"Comic Sans MS";
}

#suckertree1 li ul li { /* first level submenu */
background: #8da482; /* background-color does not work */
border:solid;
border-color: #24563d;
border: 1px;
}

HTML Code:
<div class="suckerdiv">
<ul id="suckertree1">
<li>Home</li>
<li>About Us
<ul>
<li>Membership</li>
<li>History</li>
<li>Office Contact</li>
<li>Forms</li>
</ul>
</li>

<li>Executive Board
<ul>
<li>Directors</li>
<li>Board Minutes</li>
<li>Standing Rules</li>
<li>By Laws</li>
</ul>
</li>

<li>Tournaments
<ul>
<li>Seniors & Super Seniors</li>
<li>Spring Partners</li>
<li>Mixed Couples</li>
<li>Championship</li>
<li>Team Play</li>
<li>Helen Lengfield</li>
<li>Rules & Policies</li>
<li>Other Events</li>
</ul>
</li>

<li>Area & 9 Hole
<ul>
<li>Niners</li>
<li>East Bay</li>
<li>Fresno</li>
<li>North Central</li>
<li>Redwood</li>
<li>Sacramento</li>
<li>San Jose</li>
<li>Stockton</li>
</ul>
</li>

<li>Rules</li>
<li>Handicap
<ul>
<li>Handicapping</li>
<li>Course Ratings</li>
</ul>
</li>

<li>News
<ul>
<li>Calendar</li>
<li>Monthly News</li>
<li>Notes & Quotes</li>
<li>Holes in One</li>
<li>Special Awards</li>
<li>Junior Programs</li>
<li>Charitable Contributions</li>
</ul>
</li>

<li>PWGA Apparel</li>
</ul> <!-- End of first level menu ul -->

</body>

Any help will be greatly appreciated.

Hi,
Great menu.
I'm not using it as a navigation menu but a dynamic document listing.
For example,
8/10/07 Meeting >Agenda
Meeting minutes
Handouts > Handout 1
Handout 2

Works great until you add a divider, like a horizontal line, then the second menu doesn't work.
Any ideas?
I tried changing the 'div' id name, copying a second set of suckerdiv styles (with a different name, of course)
I'm at my wits end.

It's like the javascript is called once and only once for a single menu on the page.

Thanks for any help.

C. MacLeod

it all css style very useful for web designer & developer

thank to
dynamic drive

Strange issue with firefox 2 and a flash file to the right of menu. When I add a third link (<li>) I get a grey space between the second and third menu <li>. I have tested it with out the flash file and it works fine. I have used a z-index for flash file and wmode=transparent...
It works fine in all other browsers.

Thank you for this code-it works really well.

I have have a problem when adding a menu line that wraps to 3 lines. It doesn't show on the menu however if I shorten, it does show.

Is there something I need to change to make this line show up please?

Many thanks,
Beaver

Any one can tell me how to fix a problem with <select> tag in IE6.
When I place near the menu, a div with a <select> inside, the options displayed appear behind the div.

As far as the <SELECT> tags, that is an issue with all pre-7.0 browsers. What you need to do is hide the SELECT elements when you mouseover and then redisplay them when you mouseout. Here is the code I use - you will need to modify it:

function hideSelects()
{
var selElems=document.getElementsByTagName('select');
var numElems=selElems.length;
for(i=0; i < numElems; i++) {
selElems[i].style.visibility = "hidden";
}
}
function unhideSelects()
{
var selElems=document.getElementsByTagName('select');
var numElems=selElems.length;
for(i=0; i < numElems; i++) {
selElems[i].style.visibility = "visible";
}
}

The menu is great and works fine with Windows.
But if I test it out on MAC using AOL as the ISP, the menus are inaccessible (they show for a brief second) and the site closes down.

Is there a fix for this for MAC's?

I have seen a few references here to a problem I am having, but I do not see any solution. If I have an image on the web page, when my menu items (2nd level or more) pop up, they are hidden, or "go behind" the image. I am experiencing this issue with FF & IE.
Any Suggestions?
Thanks
Jeff