The point is simple, when you click on the menu icon, the list should drop out, in any case it seems so :) I spied on the technique in one lesson, but something did not work.

.menu:focus .dropdown{ display: block; } .main-head .dropdown{ position: absolute; margin-top: 85px; right: 210px; display: none; } <header class="main-head"> <div id="logo"> <p>Smart</p> </div> <button class="button menu"></button> <ul class="dropdown"> <li> <a href="">Menu1</a> </li> <li> <a href="">Menu2</a> </li> <li> <a href="">Menu3</a> </li> <li> <a href="">Menu4</a> </li> </ul> </header>

    1 answer 1

    You did not correctly specify the name of the element. To indicate an element that is on the same level, you need to set ~

     .menu:focus ~ .dropdown{ display: block; } .main-head .dropdown{ position: absolute; margin-top: 85px; right: 210px; display: none; } 
     <header class="main-head"> <div id="logo"> <p>Smart</p> </div> <button class="button menu">Кнопка</button> <ul class="dropdown"> <li> <a href="">Menu1</a> </li> <li> <a href="">Menu2</a> </li> <li> <a href="">Menu3</a> </li> <li> <a href="">Menu4</a> </li> </ul> </header>

    • Thank! And I thought that ..) - adckiykpolb