2
離開後隱藏我有以下標記的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>
下面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;
}
問題：當您轉到第二級並將鼠標懸停在LI上時，會出現第三級列表。如果你從一個LI到另一個LI，第一個LI中嵌套的第三個層次列表消失，第二個嵌套在第二個層次內（如果有的話）。
但
相反，如果你完全離開第二級列表，不做第三級菜單第二級菜單內導航消失，一旦你重新列表中的第二級菜單第三級最後一個顯示的內容出現在它的LI旁邊，但沒有內容（As沒有文本）。這些列表與樣式一起出現，就好像它們沒有被徘徊一樣。
你可以在這裏檢查效果：http://jsfiddle.net/JE8ZM/。如果你在IE9或Chrome上運行它，它可以工作。但是，如果您在IE7上運行它，請嘗試使用FieldOne LevelTwo，將鼠標懸停在其上，然後離開它，而不必進入顯示的第三級菜單。然後將鼠標懸停在FieldThree LevelOne上，看看我的意思。
謝謝。