将CSS悬停在导航栏中

Question

我试图使用ul li制作导航栏并禁用CSS中的文本格式。代码工作得很好，因为我也为按钮做了一个小的淡入淡出动画。如果我的导航栏中有一个下拉菜单，则会出现问题。将鼠标悬停在具有下拉菜单的li上也会导致下拉列表中的内容变为动画。

我知道可能有一些选择器可以用来使它不这样做，但到目前为止我还没有得到它的工作。什么是正确的做法？

这里的HTML：

<nav> 
    <ul> 

     <a href="index.html"><li id="left">Home</li></a> 
     <a href="#"><li>Menu 1</li></a> 

     <li><span>Dropdown</span> 
      <ul> 
       <a href="#"><li>Dropdown menu 1</li></a> 
       <a href="#"><li>Dropdown menu 2</li></a> 
      </ul> 
     </li> 

     <a href="#"><li>Menu 3</li></a> 
     <a href="#"><li id="right">Contact me</li></a> 

    </ul> 

</nav> 

这里的CSS：

nav{ 
    display: inline; 
    float: left; 
    background-color: #d48041; 
    box-shadow: 0 1vh 2vh -0.5vh #F2B57B inset; 
    width:90%; 
    padding-left:10%; 
    height:5%; 
    font-weight: bold; 
} 

nav ul{ 
    list-style: none; 
    margin:0; 
    padding:0; 
    display: inline; 
} 

nav ul a{ 
    text-decoration: none; 
    color: black; 
    font-size: 1.5vh; 
} 

nav ul a li{ 
    display:inline-block; 
    float:left; 
    text-align: center; 
    height: 5vh; 
    line-height: 5vh; 
    width:10%; 
    margin:0; 
    box-sizing: border-box; 
} 

nav ul li ul{ 
    display:none; 
} 

nav ul li:hover ul{ 
    display:block; 
    position: absolute; 
    z-index: 1; 
    width: 91%; 
    margin-left: -0.1vw; 
} 

nav ul li ul li{ 
    background-color: #FFA968; 
    border: solid 0.04vw black; 
} 

nav ul a li:not(.noborder), nav ul li { 
    border-right: solid 0.04vw black; 
} 

#left { 
    border-left: solid 0.04vw black; 
} 

#right { 
    float: right; 
    width: 20%; 
    margin-right:11.1%; 
    border-left: solid 0.04vw black; 
} 

nav ul a:hover{ 
    animation-name: text_fadein; 
    animation-duration: 0.3s; 
    animation-fill-mode: forwards; 
} 

nav ul li:hover span{ 
    cursor: default; 
} 

nav ul a:hover li{ 
    animation-name: menu_fadein; 
    animation-duration: 0.3s; 
    animation-fill-mode: forwards; 
} 

Answer 1

为了防止动画越来越适用于儿童使用>选择器选择直接子。

nav ul>a:hover{ 
    animation-name: text_fadein; 
    animation-duration: 0.3s; 
    animation-fill-mode: forwards; 
} 

nav ul>li:hover span{ 
    cursor: default; 
} 

nav ul>a:hover>li{ 
    animation-name: menu_fadein; 
    animation-duration: 0.3s; 
    animation-fill-mode: forwards; 
}