sgt

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;}

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;}