Блог

Главная - Вопросы по программированию - Почему мое выпадающее меню отображается только наполовину?

Почему мое выпадающее меню отображается только наполовину?

#javascript #html #css #drop-down-menu #frontend

#javascript #HTML #css #выпадающее меню #интерфейс

Вопрос:

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

CSS

 <style>
.menu-btn 
{background-color:#f5f5f5 ;
 color: black;
 font-family: sans-serif;
 border: none;}

.dropdown-menu {
   position: relative;
   display: inline-block;
   position: relative;
   display: inline-block;
   border:1% solid #3c4043;}

.menu-content {
   display: none;
   position: absolute;
   background-color: #f5f5f5;
   min-width: 160px;
   box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
   right: 0;
   align-items:center;
   border-radius: 3%;
   border:1% solid #black;
   width:300px;
   height: 500px;
   cursor: pointer;}
</style>

**<javascript>**

<script>
let dropdownBtn = document.querySelector('.menu-btn');
let menuContent = document.querySelector('.menu-content');
dropdownBtn.addEventListener('click',()=>{
   if(menuContent.style.display===""){
      menuContent.style.display="block";}
 else {
      menuContent.style.display="";}
})
</script>

Комментарии:

1. Где html-код?

2. @Clvckl3s Слишком большой для меня, чтобы поместить его здесь. но в основном я использовал строки и столбцы, подобные этому : <div class="dropdown-menu"> <button class="menu-btn"><i class="fa fa-bars"></i></button> <div class="menu-content"> <div class="row"> <div class="column"> …..

3. почему бы вам не отредактировать сообщение и не добавить HTML-код таким образом?

Ответ №1:

У вас есть дополнительный: в высоту для вашего класса menu-content.

В CSS также есть несколько других ошибок. Я создал jsfiddle, который может помочь вам выяснить, что не так с вашим собственным кодом.

https://jsfiddle.net/6ck7rq53/6/

Я создал простой выпадающий список HTML, используя ваши собственные классы:

 <html>
  <body>
    <div class="dropdown-menu">
      <button class="menu-btn">Dropdown
        <div class="menu-content">
            <p>One</p>
            <p>Two</p>
            <p>Three</p>
        </div>
      </button>
    </div>
  </body>
</html>

и я исправил ваши ошибки CSS:

 .menu-btn {
 background-color: #f5f5f5;
 color: black;
 font-family: sans-serif;
 border: none;
 }

.dropdown-menu {
  position: relative;
  display: inline-block;
  border: 1px solid #3c4043;
  height: auto;
}

.menu-content {
   display: none;
   position: absolute;
   background-color: #f5f5f5;
   min-width: 160px;
   box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2);
   right: 0;
   align-items: center;
   border-radius: 3%;
   border: 1px solid black;
   width: 300px;
   height: 500px;
   cursor: pointer;
   left: 0; 
}