Maintaining a css :hover effect for all items up a nested list chain

So, I have DOM that looks like this:

<ul id="nav">
  <li><a>Hello</a></li>
  <li>
    <a>OuterMenu</a>
    <ul>
      <li><a>InnerMenu1</a>
        <ul><li><a>InnerMenu2</a></li><li><a>Item 1</a></li><li><a>Item 2</a></li></ul>
      </li>
    </ul>
  </li>
</ul>

which looks like this:

+Hello              +OuterMenu
                    ----InnerMenu1--------------InnerMenu2
                    ----Other list item         Item 1
                                                Item 2

That is, the first menu is horizontal, the next menu is dir开发者_运维问答ectly below the first menu, and all subsequent inner menus appear directly to the right [see example here].

This works fine, but I need the hover styles for each outer menu to persist as each inner menu is selected. When the user is hovering over Item 1, Item 1, InnerMenu, and OuterMenu should be highlighted, and when the user moves off of the whole menu tree, then and only then should OuterMenu no longer be highlighted. Is there a better way to do this than trying to manage a hover and mouseout event on every single list item?

I'm looking for a clean implementation here.

Check out Stu Nicholls great css-only work on just this issue.

I don´t know what you have already, but if you use something like:

#nav > li:hover > a {
    // outer menu highlight
}

it should highlight the outer menu also when you are on a sub-menu item.

The same technique can be applied to all levels, but it depends on your browser compatibility requirements as li:hover will not work in older IE versions.

For completeness

/* second level */
#nav > li > ul > li:hover > a {
}
/* third level */
#nav > li > ul > li > ul > li:hover > a {
}

Simply using the :hover psuedo-class on your li will apply even when you are over a descendant element. Here's a working example showing that this is true: http://jsfiddle.net/eMyHE/; hover over InnerMenu2 and you'll see InnerMenu1 and OuterMenu highlight.

Also, you might be interested in my 8-years-old CSS-only hierarchical menu tests, part of some ancient code that uses JavaScript for hierarchical menus.

This isn't my work, I'm just passing it on. It looks like it's the same answer as JakeParis's, but in JSFiddle form. http://jsfiddle.net/XPE3w/7/ This is for HTML with a ul>li>a structure (see the link if this doesn't make sense).

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
    background: #617F8A;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a {
    background: #617F8A;
}
li:hover li a:hover {
    background: #95A9B1;
}