將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; 
}