Dropdown html nie działa

Question

HTML

<div class="menu">

<a href="index.html">Strona Główna</a>
<a href="https://www.onet.pl">Aktualności</a>
<a href="mapaokolicy.html">Mapa okolicy</a>

<div class="dropdown">
<a>Informacje</a>
</div>
<div class="dropdown-content">

<a>Historia</a>
<a>Geografia</a>
<a>Środowisko</a>
<a>Kartografia archiwalna</a>

</div>


<a href="galeriafotografi.html">Galeria Fotografii</a>
<a href="filmy.html">Filmy</a>
<a href="dawnimieszkancy.html">Dawni mieszkańcy</a>
<a href="prasa.html">Artykuły prasowe</a>
<a class="zakrotki" href="kontakt.html">Kontakt</a>

CSS

a
{
    display:block;
    padding:14px 22px;
    float:left;
    text-decoration:none;
    font-size:116%;
    font-family:Times New Roman;
    color:blue;
    
    
}
a:hover
{
    background-color:lightgreen    ;
    
    
}
a:visited
{
    color:blue;
}
.dropdown
{
    position:relative;
    float:left;
}


.dropdown-content
{
 
 
 position:absolute;
 display:none;
 
 
    
}
.dropdown:hover .dropdown-content
{
    display:block;
}

 

Pominąłem podstawowe linie kodu ponieważ cała reszta działa poprawnie.

Po najechaniu myszą na dropdown nie ma żadnej reakcji. Dlaczego? Z góry dziękuję za pomoc

Answer 1

.dropdown:hover .dropdown-content
{
    display:block;
}

ale z Twojej struktury html nie wynika, aby dropdown-content był dzieckiem dropdown, więc jak to ma zadziałać? 

Comments

Dziękuję za odpowiedź. Jak powinno być poprawnie?

---

W Twoim przykładzie, div dropdown oraz dropdown-content nie zawierają się w sobie (a powinny!). 

Tu masz piękny przykład dropdownu https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

---

Dziękuję serdecznie :). Zamykam