Question

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

Answer 1

Bryan, thanks. I basically did something to what you suggested. I already had a class called “.selected”, which was used to display the selected tab for the menu. in the “hover” event I put an if statement to check to see if the class had “selected” in it, if so, I simply displayed the hidden span tag. “$(this).next().show();” is the line that did what I needed on the “click” event to make the submenu stay put. Hope it helps anyone else.

See the code:

$("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

            if( $(this).children("a").is('.selected') ) 
            {
                $(this).children("span").show();
            } 
            else 
            {
                $(this).find("span").hide(); //Hide the subnav
            }
        });

        $(".menu_buttons li>a").click(function(){
            $(this).addClass('selected').removeClass('button')
                    .parents().siblings().children("a").removeClass('selected').addClass('button')
                    .parents().siblings().children("span").hide()
            $(this).next().show();
        });