dropdown menus

[MonteChristo]

i have created a simple dropdown menu with html/css. currently when you scroll over the heading it turns from black to red, the drop list appears and you can highlight each link. however what i am trying to do is make it so when you are over the other links in the dropdown, the main header of the dropdown stays red. guessing its a javascript thing. my html:

<div class="spotlightbuttons">
<ul id="nav"><li><a href="" class="prime">CLIENT PORTAL</a>
<ul>
<li><a href="1.html">One</a></li>
<li><a href="2.html">Two</a></li>
<li><a href="3.html">Three</a></li>
<li><a href="4.html">Four</a></li>
<li><a href="5.html">Five</a></li>
</ul></ul>
</div>

[boogyman]

<div class="spotlightbuttons">
<ul id="nav"><li><a href="" class="prime">CLIENT PORTAL</a>
<ul class="subMenu">
<li><a href="1.html">One</a></li>
<li><a href="2.html">Two</a></li>
<li><a href="3.html">Three</a></li>
<li><a href="4.html">Four</a></li>
<li><a href="5.html">Five</a></li>
</ul></li></ul>
</div>

/* color you want when a link is not being hovered or actively clicked */
ul.subMenu li a:link, ul.subMenu li a:visited {
     color: #_____________;
}
/* color of the links when mouse hovered over and when link is being actively clicked */
ul.subMenu li a:hover, ul.subMenu li a:active {
     color: #_____________;
}

on your secondary menus just add a class to the ul element and assign the dropdown css accordingly


also notice that i added in an extra ending list item tag... that is to close the initial list item. thats one of those small tweeks that wont break a browser but will cause the CSS to throw a warning if not an error

[MonteChristo]

thanks very much for your reply. i probably should have posted some of my css code for the list to help make it a bit clearer. i tried to incorporate what you have written, but this seems to just give me a list that is black and the rollovers turn red when i rollover them. what i really would like to do (if possible) is have it so the list heading of 'CLIENT PORTAL' turns red when hovering over the submenu items and stays red until the user scrolls out of the list:

<div class="spotlightbuttons">
<ul id="nav"><li><a href="" class="prime">CLIENT PORTAL</a>
<ul class="subMenu">
<li><a href="1.html">One</a></li>
<li><a href="2.html">Two</a></li>
<li><a href="3.html">Three</a></li>
<li><a href="4.html">Four</a></li>
<li><a href="5.html">Five</a></li>
</ul></li></ul>
</div>

and the css:

/* --- Spotlight Dropdown Menu Styles --- */

.spotlightcontainer {
font-size: 1.1em;
width: 100%;
margin: 0 auto;
float: left;
}

.spotlightcontainer .spotlightbuttons {
color: black;
float: right;
text-align: left;
background-color: white;
margin-top: 5em;
z-index: 1;
}

.spotlightcontainer .spotlightbuttons a {
text-decoration: none;
padding-top: .5em;
padding-bottom: .5em;
padding-left: 1em;
padding-right: 1em;
}

.spotlightcontainer .spotlightbuttons a:hover {
color: #FF0000;
text-decoration: none;
background-color: white;
padding-top: .5em;
padding-bottom: .5em;
padding-left: 1em;
padding-right: 1em;
}

#nav, #nav ul {
	float: right;
	text-align: left;
	list-style: none;
	margin: 0;
	z-index: 1;
}

#nav a {
	display: block;
	color: black;
	text-decoration: none;
	padding-top: .5em;
	padding-right: 1em;
	padding-bottom: .5em;
	padding-left: 1em;
	border-width: 0;	
}

#nav a.prime {
	font-weight: bold;
}

#nav a:hover {
	color: #FF0000;
}

#nav li:hover a.prime {
	text-decoration: none;
	background-color: white;
	padding-top: .5em;
	padding-right: 1em;
	padding-bottom: .6em;
	padding-left: 1em;
	font-weight: bold;
}

#nav li {
	float: left;
	padding: 0;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 17.5em;
	margin-left: 0;
	padding: 0;
	list-style-type: none;
}

#nav li li {
	padding-right: 0em;
	width: 17.5em;
	border: dotted #C1C1C1;
	border-width: 0 0 1px 0;
}

#nav li ul a {
	background: white;
	width: 14em;
}

#nav li ul ul {
	background: white;
	color: black;
	margin: -2em 0 0 15em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
	color: #FF0000;

}


#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
	background: white;
	color: #FF0000;
}

[zaphod42]

why don't you set an onMouseOver event to change the colors of the menu items rather than setting the hover prop?

<onMouseOver=function(this){this.style.backgroundColor='red'},menuFunc(this);

then you can add tell onMouseOut to change the color back, or for a more condensed code, just add the this.style.backgroundColor line into your menu function.