Force parent to stay hovered while hover submenu?

[jace41]

The javascript isn't my great fore. So how should the script be written to force the parent li to stay hovered (highlighted) while hover the submenu? Here's example of drop down: http://deafiron.com/mdd/test2.html

nav buildup:

<div class="navs"> 
	<ul id="nav" class="clear">
		<li><a href="#">Sideline</a> 
			<ul></ul>
		</li>
		<li><a href="#">League</a> 
			<ul>
				<li><a href="#">submenu</a></li>
				<li><a href="#">submenu</a></li>
				<li><a href="#">submenu</a></li>
			</ul>
		</li>
		<li><a href="#">Scoreboard</a> 
			<ul>
				<li><a href="#">submenu</a></li>
				<li><a href="#">submenu</a></li>
			</ul>
		</li>
		<li><a href="#">Resources</a> 
			<ul>
				<li><a href="#">submenu</a></li>
			</ul>
		</li>
		<li><a href="#">Contact</a> 
			<ul></ul>
		</li>
	</ul>
</div>

Thanks,

jace

[Kravvitz]

You don't need JavaScript for that. You just need to tweak a few CSS rules. (Changes are in bold. At this point you don't need the new rule, however, I expect you'll add a hover style to those links eventually.)

ul#nav li a:hover, ul#nav li:hover a {
	background-color: #292929;
}
ul#nav li:hover li a {
	background-color: transparent;
}

[jace41]

Great it did the trick. I did seen this classes in suckerfish sample but didn't realized I need them to do this trick. Thanks for point it out!

Jace