與動畫落右功能

Question

水平菜單，我想在第一級別的項目徘徊這樣當創建水平菜單有一個生動活潑的效果：

.nav { 
 
    float: right; 
 
} 
 

 
.nav ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav ul li { 
 
    position: relative; 
 
} 
 

 
.nav > ul > li { 
 
    float: left; 
 
    margin-left: 30px; 
 
} 
 

 
.nav ul li a { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    width: auto; 
 
    color: #6E6C6C; 
 
    transition: 1s ease; 
 
} 
 

 
.nav ul ul { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    display: none; 
 
    width: 110px; 
 
} 
 

 
.nav ul li a:hover { 
 
    color: #000; 
 
    transform: translateX(-50%); 
 
} 
 

 
.nav > ul > li > a { 
 
    padding: 15px 20px 15px 20px; 
 
    width: auto; 
 
} 
 

 
.nav ul li:hover > ul { 
 
    display: block; 
 

 
}

<div class="nav"> 
 
    <ul> 
 
    <li><a href="#">List Item 1</a> 
 
     <ul> 
 
     <li><a href="#">List Sub-Item 1</a></li> 
 
     <li><a href="#">List Sub-Item 2</a></li> 
 
     <li><a href="#">List Sub-Item 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">List Item 2</a> 
 
     <ul> 
 
     <li><a href="#">List Sub-Item 1</a></li> 
 
     <li><a href="#">List Sub-Item 2</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">List Item 3</a></li> 
 
    <li><a href="#">List Item 4</a></li> 
 
    </ul> 
 
</div>

在這裏，我有問題當我將鼠標懸停在第一級別項目上時，它會返回到初始狀態。 我該如何解決這個問題？我應該使用flexbox嗎？ 請給我一個簡單的例子。

Answer 1

您應該將.nav ul li a:hover選擇器更改爲.nav ul li:hover > a。

更新片段：

.nav { 
 
    float: right; 
 
} 
 

 
.nav ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav ul li { 
 
    position: relative; 
 
} 
 

 
.nav > ul > li { 
 
    float: left; 
 
    margin-left: 30px; 
 
} 
 

 
.nav ul li a { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    width: auto; 
 
    color: #6E6C6C; 
 
    transition: 1s ease; 
 
} 
 

 
.nav ul ul { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    display: none; 
 
    width: 110px; 
 
} 
 

 
.nav ul li:hover > a { 
 
    color: #000; 
 
    transform: translateX(-50%); 
 
} 
 

 
.nav > ul > li > a { 
 
    padding: 15px 20px 15px 20px; 
 
    width: auto; 
 
} 
 

 
.nav ul li:hover > ul { 
 
    display: block; 
 

 
}

<div class="nav"> 
 
    <ul> 
 
    <li><a href="#">List Item 1</a> 
 
     <ul> 
 
     <li><a href="#">List Sub-Item 1</a></li> 
 
     <li><a href="#">List Sub-Item 2</a></li> 
 
     <li><a href="#">List Sub-Item 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">List Item 2</a> 
 
     <ul> 
 
     <li><a href="#">List Sub-Item 1</a></li> 
 
     <li><a href="#">List Sub-Item 2</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">List Item 3</a></li> 
 
    <li><a href="#">List Item 4</a></li> 
 
    </ul> 
 
</div>