Hovering here - h3: hover .dropdown_content - for some reason, the drop-down list does not work.

h3 { line-height: 2; margin: 20px 20px 0 0; font-weight: normal; font-size: 18px; color: #a87f5c; cursor: pointer; text-transform: uppercase; border: 1px dotted black; } h3:hover .dropdown_content { display: block; width: 200px; background-color: white; box-shadow: -1px -1px 5px 0 #a87f5c; } .dropdown_content { display: none; padding: 10px 25px; } .dropdown_content a { text-decoration: none; color: #a87f5c; font-size: 18px; text-align: left; display: block; transition: .6s all ease; margin-bottom: 5px; width: 250px; text-transform: uppercase; } .dropdown_content a:hover { color: #0e1d26; margin-left: 15px; transition: .6s all ease; } 
  <h3 href="pages/production.html">Продукция/портфолио</h3> <div class="dropdown_content"> <a href="pages/tables.html">Столы</a> <a href="pages/storage.html">Мебель <br>для хранения</a> <a href="pages/interior.html">Интерьер</a> </div>

    1 answer 1

    Because this version of the rules only works with nested elements.

      h3 { line-height: 2; margin: 20px 20px 0 0; font-weight: normal; font-size: 18px; color: #a87f5c; cursor: pointer; text-transform: uppercase; border: 1px dotted black; } .dropdown_content { display: none; padding: 10px 25px; } .wrap:hover .dropdown_content { display: block; width: 200px; background-color: white; box-shadow: -1px -1px 5px 0 #a87f5c; } .dropdown_content a { text-decoration: none; color: #a87f5c; font-size: 18px; text-align: left; display: block; transition: .6s all ease; margin-bottom: 5px; width: 250px; text-transform: uppercase; } .dropdown_content a:hover { color: #0e1d26; margin-left: 15px; transition: .6s all ease; } 
     <div class="wrap"> <h3 href="pages/production.html">Продукция/портфолио</h3> <div class="dropdown_content"> <a href="pages/tables.html">Столы</a> <a href="pages/storage.html">Мебель <br>для хранения</a> <a href="pages/interior.html">Интерьер</a> </div> </div>