ナビゲーションバーのCSSホバー

Question

ul liを使用してnav barを作成し、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; 
}