与动画落右功能

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>