1 Вопрос: Выпадающее меню работает неправильно. (HTML)

вопрос создан в Thu, May 2, 2019 12:00 AM

я делаю свой сайт просто используя HTML-код (без начальной загрузки). Я хочу сделать выпадающий список со списком спецификаций. Проблема заключается в том, что когда я открываю свой список, проблема заключается в том, что содержимое, расположенное ниже, больше не перемещается ниже, поэтому оно перекрывает список. Посмотрите на эту картинку, чтобы увидеть, что у меня есть. введите описание изображения здесь

Идеальная идея - сделать следующее:  введите описание изображения здесь

Итак, здесь, когда я открываю список, ниже автоматически показывается контекст ниже (но это загрузчик, поэтому я не могу просто скопировать его, потому что я использую только HTML)

Мой HTML-код такой:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>   

И CSS:

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

И JavaScript:

<script>

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>
    
0
  1. Попробуйте удалить position: absolute; из класса .dropdown-content.
    2019-05-02 15: 01: 04Z
1 ответ                              1                         

Пример: https://codepen.io/anon/pen/VNojBe р>

  1. Удалить position: absolute; из .dropdown-content
  2. Измените на position: relative в .dropdown-content
1
2019-05-02 15: 19: 02Z
источник размещен Вот