Блог

Я выполняю школьный проект, в котором мне не разрешено использовать Javascript или начальную загрузку, и я не могу найти способ создать выпадающее меню, когда сайт открывается на меньших экранах. Большинство руководств и видео показывают использование Bootstrap или JS, и это привело меня в замешательство, можно ли использовать только HTML и CSS?. Кто-нибудь может дать мне несколько быстрых советов или альтернатив? Заранее благодарю вас!

Ответ ниже, используя только HTML и CSS.

Если мой ответ сработает, пожалуйста, проверьте его как окончательный ответ и озвучьте его, чтобы другие люди с той же проблемой тоже получили помощь. Овации

 <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
</div>


<style>
    /* Style The Dropdown Button */
    .dropbtn {
        cursor: pointer;
    }    
    /* The container <div> - needed to position the dropdown content */
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
      display: none;
      position: absolute;
      z-index: 1;
    }
    
    /* Links inside the dropdown */
    .dropdown-content a {
      color: black;
      padding: 12px;
      text-decoration: none;
      display: block;
    }
    
    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
      display: block;
    }
    </style>