Question

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.

Answer 1

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