CSS下拉菜单：第三级列表不'；从第二关离开后不要隐藏

我有以下CSS下拉菜单的标记：

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

问题：当您转到第二级并将鼠标悬停在LI上时，将显示第三级列表。如果在第二级中从一个LI转到另一个LI，嵌套在第一个LI中的第三级列表将消失，而嵌套在第二个LI中的列表将出现（如果有）

但是

如果在第二级菜单内导航，完全离开第二级菜单，而不使第三级菜单消失，则重新列出第二级菜单后，最后显示的第三级菜单将显示在其LI旁边，但没有内容（As中没有文本）。列表显示时的样式似乎没有悬停

您可以在此处检查效果：。如果你在IE9或Chrome上运行它，它就会工作。但是如果你在IE7上运行它，试着进入FieldOne level 2，将鼠标悬停在它上面，然后离开它的左边，而不进入显示的第三级菜单。然后将鼠标悬停在Field Three Level One上，看看我的意思

---

谢谢。

众所周知，如果没有Javascript或jQuery的帮助，嵌套的子导航菜单很难跨浏览器工作。这是我所知道的最好的“纯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;
}