sgt Posted April 28, 2013 Share Posted April 28, 2013 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;} Link to comment Share on other sites More sharing options...
newseed Posted April 29, 2013 Share Posted April 29, 2013 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. Link to comment Share on other sites More sharing options...
Ingolme Posted April 29, 2013 Share Posted April 29, 2013 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;} 1 Link to comment Share on other sites More sharing options...
sgt Posted April 30, 2013 Author Share Posted April 30, 2013 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;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now