How do I make a popup submenu stay open on specific pages

[sgt]

I'm learning CSS as I go along, not great at it, but I seem to manage to get things to work eventually. I adapted this horizontal menu with horizontal submenu for my own use, and it seems to work good. The only thing I want to be able to do is, when any of the submenu HTML pages are active, like if I'm on the Bio page, I want the submenu to stay open and the active page to be highlighted (it is highlighted now, I just need to know how to keep the hovered submenu open on the desired page). I don't really understand what is making it open the submenu when it hovers so I can't figure out how to stop that on specific pages only. Hopefully that makes sense. Let me know if unclear.Any help would be much appreciated Here's the HTML

<div id="navcontainer">		<ul id="menu">			<li class="lg"><a href="about.html">ABOUT</a><ul><li class="sm"><a href="bio.html" class="active">BIO</a></li><li class="sm"><a href="#">SOMETHING</a></li></ul></li>			<li class="lg"><a href="store.html" accesskey="1">STORE</a></li>			<li class="lg"><a href="gallery.html" accesskey="2">GALLERY</a>				<ul>					<li class="sm"><a href="#">ONE</a></li>					<li class="sm"><a href="#">TWO</a></li>					<li class="sm"><a href="#">THREE</a></li><li class="sm"><a href="#">FOUR</a></li><li class="sm"><a href="#">FIVE</a></li><li class="sm"><a href="#">SIX</a></li>				</ul>			</li>			<li class="lg"><a href="contact.html" accesskey="3">CONTACT</a></li>		</ul>	</div> <!-- /navcontainer-->

And here's the CSS

#navcontainer {width: 520px;height: 60px;margin: -70px auto 0 auto;position: relative;overflow: none;padding: 0;} ul#menu {width: 520px; border-bottom: 1px solid #CFCFCF;} ul#menu ul {width: 500px;} ul#menu, ul#menu ul{height: 30px;margin: 0;padding: 0;list-style-type: none;} ul#menu li.lg {line-height: 30px;width: 130px;float: left;color: #ff6633;text-align: center;font-size: 0.9em;} ul#menu li.sm {line-height: 30px;width: 45px;float: left;text-align: left;font-size: 0.8em;} ul#menu li ul {display: none;} ul#menu li:hover ul {display: block;} ul#menu ul li a {float: left;} ul#menu a{display: block;text-decoration: none;}

[newseed]

You will need to use to jquery to make it work. Here's a barebone of the function but you will need to do a bit more research to get it to work with a sublevel.

[Ingolme]

It can be done without jQuery. Have a class called "active" and on the particular page put the class on the submenu that you want to show.

<li class="active"> ul#menu li.active ul {    display: block;}

[sgt]

It can be done without jQuery. Have a class called "active" and on the particular page put the class on the submenu that you want to show.

<li class="active"> ul#menu li.active ul {	display: block;}

Thanks! That definitely helped. I ended up having to leave off the li. and put it in the ul for the submenu like this:

<ul class="active">   <li><a href="#">One</a></li>   <li><a href="#">Two</a></li> ul#menu ul.active {display: block;}