Question

I have the following markup for a CSS dropdown menu:

<ul>
    <li><a>FieldOne LevelOne</a></li>
    <li><a>FieldTwo LevelOne</a></li>
    <li><a>FieldThree LevelOne</a>
        <ul>
            <li><a>FieldOne LevelTwo</a>
                <ul>
                    <li><a>FieldOne LevelThree</a></li>
                    <li><a>FieldTwo LevelThree</a></li>
                </ul>
            </li>
            <li><a>FieldTwo LevelTwo</a>
                <ul>
                    <li><a>FieldOne LevelOn</a></li>
                </ul>
            </li>
       </ul>
  </ul>

And the following CSS:

ul ul {
    display: none;
}

ul li {
    list-style: none;
}

ul li:hover > ul {
    display: block;
}

ul
{
    background: #76b800;
    padding: 0 20px;
    margin-left: 5px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
}

ul:after {
    content: ""; clear: both; display: block;
}

ul li {
    float: left;
    min-width: 140px;
    text-align: center;
    vertical-align: bottom; 
}

ul li:hover {
    background-color: #4478B7;
}

ul li a
{
    display: block;    
    padding: 10px 40px 10px 40px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

ul ul {
    background: #4478B7; 
    padding: 0;
    position: absolute; 
    top: 100%;
    z-index: 5;
    margin: 0;
}

ul ul li
{
    float: none;
    border-top: 1px solid;
    border-bottom: 1px solid;
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: #88AAD2 white #335B8C white;
}

ul ul li:hover
{
    background-color: #396599;
    background-image: none;
}

ul ul li a {
    color: #fff;
    min-width: 140px !important;
    padding: 10px 40px 10px 40px !important;
    font-size: 16px !important;
}   

ul ul li a:hover {
    background: #233F61;
}

ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}

The problem: When you go to the second level and you hover over a LI, the third level list appears. If you go from one LI to another in the second level, the third level list nested inside the first LI disappears and the one nested inside the second appears (if it has one).

BUT

If instead you leave the second-level list altogether without making the third-level menu disappear by navigating inside the second-level menu, once you re-list the second-level menu the third-level one that was last showed appears there next to its LI, but without content (no text from As). The lists appear with the style as though as they weren’t being hovered.

You can check the effect here: http://jsfiddle.net/JE8ZM/. If you run it on IE9 or Chrome, it works. But if you run it on IE7, try going to FieldOne LevelTwo, hover over it and then leave on its left, without entering the third-level menu that showed up. Then hover over FieldThree LevelOne and see what I mean.

Thanks.

Answer 1

Nested sub nav menus are notoriously difficult to get working cross browser without the aid of Javascript or jQuery. Here is the best ‘pure CSS’ resource I know of which will solve your problem!

http://www.cssplay.co.uk/menus/final_drop2.html