HTMLドロップダウンメニューが動作しない/表示されない

Question

---

ドロップダウンが表示されますが、ブロックが消えるように指示すると、それを上に戻して戻ってきます。 はHERESに私のCSSのコーディング：、それは消えていないと戻ってこない。

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    background-color: black; 
    background-size: cover; 
} 

nav { 
    width: 100%; 
    height: 60px; 
    background-color: #fff; 

} 

nav p { 
    font-family: arial; 
    color: #222; 
    font-size: 22px; 
    line-height: 55px; 
    float: left; 
    padding: 0px 20px; 

} 

nav ul { 
    float: left; 

} 

nav ul li { 
    float: left; 
    list-style: none; 
    position: relative; 

} 

nav ul li a { 
    display: block; 
    font-family: arial; 
    color: #222; 
    font-size: 14px; 
    padding: 22px 14px; 
    text-decoration: none; 

} 

nav ul li ul { 
    display: none; 
    position: absolute; 
    background-color: #fff; 
    padding: 10px; 
    border-radius: 0px 0px 4px 4px; 

} 

nav ul li: hover ul { 
    display: block; 

} 


nav ul li ul li { 
width: 180px; 
border-radius: 4px; 

} 


nav ul li ul li a { 
padding: 8px 14px; 

} 

nav ul li ul li a: hover { 
background-color: #f3f3f3; 

} 

私は「何も表示」を追加すると！誰かが私を助けることができます、なぜ私は戻って来ることはありません理解していない。 私はYoutubeビデオに続いています：https://www.youtube.com/watch?v=rgUp302f_lY&t=837s

Answer 1

あなたの問題は、nav ul li: hoverの間のスペースです。それはする必要があります

nav ul li:hover ul { 
    display: block; 
} 

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    background-color: black; 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #fff; 
 
} 
 

 
nav p { 
 
    font-family: arial; 
 
    color: #222; 
 
    font-size: 22px; 
 
    line-height: 55px; 
 
    float: left; 
 
    padding: 0px 20px; 
 
} 
 

 
nav ul { 
 
    float: left; 
 
} 
 

 
nav ul li { 
 
    float: left; 
 
    list-style: none; 
 
    position: relative; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    font-family: arial; 
 
    color: #222; 
 
    font-size: 14px; 
 
    padding: 22px 14px; 
 
    text-decoration: none; 
 
} 
 

 
nav ul li ul { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #fff; 
 
    padding: 10px; 
 
    border-radius: 0px 0px 4px 4px; 
 
} 
 

 
nav ul li:hover ul { 
 
    display: block; 
 
} 
 

 
nav ul li ul li { 
 
    clear: both; 
 
    width: 180px; 
 
    border-radius: 4px; 
 
} 
 

 
nav ul li ul li a { 
 
    padding: 8px 14px; 
 
    display: block; 
 
} 
 

 
nav ul li ul li a: hover { 
 
    background-color: #f3f3f3; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">Single</a></li> 
 
    <li><a href="#">Dropdown</a> 
 
     <ul> 
 
     <li><a href="#">Child 1</a></li> 
 
     <li><a href="#">Child 1</a></li> 
 
     <li><a href="#">Child 1</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>