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>