how to make css submenu stay put when subpage has been selected.
- by Ronedog
I have a css horizontal menu with a menu / submenu display working on the hover, but I would also like to make the submenu options stay put when I've selected that page. The code below shows the submenu on hover, but goes away on mouse out. I'm having some difficulty figuring out how to make my code work to keep the submenu items staying put? How can I do this?
Thanks for your help.
Here's the HTML:
<ul id="menu_nav">
<li>
<a href="#" class="button">Home</a>
<span>
<a href="#">Home Link1</a>
<a href="#">Home Link2</a>
<a href="#">Home Link3</a>
</span>
</li>
<li>
<a href="#" class="button">About Us</a>
<span>
<a href="#">About Link1</a>
<a href="#">About Link2</a>
<a href="#">About Link3</a>
</span>
</li>
</ul>
Here's the CSS
ul#menu_nav
{
position:relative;
float:left;
width:790px;
padding:0;
margin:0;
list-style-type:none;
background-color:#000099;
}
ul#menu_nav li {float: left;
margin: 0; padding: 0;
border-right: 1px solid #555;}
ul#menu_nav li a.button
{
float:left;
text-decoration:none;
color:white;
background-color:#000099;
padding:0.2em 0.6em;
border-right:1px solid #CCCCCC;
font-family: Tahoma;
font-size: 11px;
font-style: normal;
font-weight: bold;
position: relative;
height: 21px;
line-height:1.85em;
}
ul#menu_nav li a:hover {
background-color:#F7F7F7;
color:#000099;
border-top:1px solid #CCCCCC;
}
ul#menu_nav li span{
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:25px;
display: none; /*--Hide by default--*/
width: 790px;
background: #F7F7F7;
color: #fff;
}
ul#menu_nav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#menu_nav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#menu_nav li span a:hover {text-decoration: underline;}
Heres the jquery:
$("ul#menu_nav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9'}); //Add background color and image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
