Html Dropdown-Menü nicht funktioniert/nicht angezeigt

Question

Das Dropdown ist sichtbar, aber wenn ich den Block zu verschwinden sagen und ich werde darüber schweben, um es zurück zu bekommen - es kommt nicht zurück. Heres meine CSS-Codierung:

* { 
    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; 

} 

Sobald ich die Add 'display: none', verschwindet es und kommt nicht zurück! Bitte kann mir jemand helfen, ich verstehe nicht, warum es nicht wiederkommt. Ich folge einem Youtube-Video: https://www.youtube.com/watch?v=rgUp302f_lY&t=837s

Answer 1

Ihr Problem ist der Raum zwischen nav ul li: hover. Es sollte

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>

sein