CODEWITHSUNDEEP
jquerycss
Drew H
Drew H

Reputation: 4739

CSS hover menu: getting hovered menu item to keep hovered state css

enter image description here

enter image description here

In this situation how would I get the setting to keep the hovered state while going threw the menu items? Is there a CSS only way or would I have to introduce some javascript? Thanks.

Upvotes: 3

Views: 2746

Answers (3)

lnguyen55
lnguyen55

Reputation: 737

Try with top level item inside a span tag. Assuming:

<li>
    <a><span>Setting</span></a>
    <ul>
    ...
    </ul>
</li>

Then this is for CSS:

li:hover span {
    background: #color;
    display: block;
}

li:hover ul {
    display: block;
}

Upvotes: 1

Naftali
Naftali

Reputation: 146302

It is possible with just css.

For example: If your menu is made of nested lists:

li:hover {
    background: #color;
}

li:hover ul {
    display: block;
}

li:hover ul li {}

Fiddle: http://jsfiddle.net/maniator/ZC4xv/

CSS from the above example:

#nav-menu > li {
    background: orange;
    float: left;
    padding: 10px;
    border: 1px solid grey;
}

#nav-menu > li:hover a {
    background: red;
    padding: 2px;
    display: inline;
}

#nav-menu > li ul {
    display: none;
    position: absolute;
}

#nav-menu > li:hover ul {
    display: block;
    margin-left: 5px;
}

#nav-menu > li:hover ul li {
    background: blue;
}

#nav-menu > li:hover ul li:hover {
    background: green;
}

Upvotes: 4

JeffreyPia
JeffreyPia

Reputation: 414

Assuming the sub-menu is a nested list, you can use jQuery to add a hover class to the parent menu item: 

<ul class="primary-nav">  
    <li>Menu Item 1
        <ul class="sub-nav">
            <li>Sub-Menu Item 1</li>
            <li>Sub-Menu Item 2</li>
        </ul>
    </li>
    <li>Menu Item 2</li>
</ul>

<script>
    $('.primary-nav li').hover(function(){
        $(this).addClass('hover');
    }, function(){
        $(this).removeClass('hover');
    });
</script>

Upvotes: 1

Related Questions