为什么导航栏缺少选项？

Question

我正在制作一个导航栏菜单，当在移动设备上查看时，它看起来像桌面上的手风琴，效果很好，但是当我在移动设备上单击下拉菜单而不是显示所有项目时，它总是向我显示一个比我应该的少。

一般来说，我是设计新手，我想知道我的错误在哪里，因为我在第一个项目中看到它的高度加倍，并且随着它移动最后一个元素。

感谢您能给我的任何答案或指示。

//DROPDOWM MENU FULL SIZE/ MOBILE
const dropdownbtn = document.querySelectorAll('.dropbtn');
const dropdowmContenido = document.querySelectorAll('.drop_contenido');



for (let i = 0; i < dropdownbtn.length; i++) {
    dropdownbtn[i].addEventListener('click',()=>{
      dropdowmContenido[i].classList.toggle("mostrar");
    }); 
}






// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
      let dropdowmCont =  document.querySelectorAll('.drop_contenido');
       // var i;
        for (i = 0; i < dropdowmCont.length; i++) {
          var openDropdown = dropdowmCont[i];
          if (openDropdown.classList.contains('mostrar')) {
            openDropdown.classList.remove('mostrar');
          }
        }
    }
}



//RESPONSIVE
const btnOpciones= document.querySelector('#btnOpciones');
const opciones = document.querySelector('#opciones');

const btnUser=document.querySelector('#btnUser');
const opcionesUser = document.querySelector('#opcionesUser');

//BOton de opciones
btnOpciones.addEventListener('click', ()=>{
  if (opcionesUser.classList.contains('vermenu')) {
    opcionesUser.classList.remove('vermenu');
  } 
  opciones.classList.toggle('vermenu');
});


//Boton de Usuario
btnUser.addEventListener('click', ()=>{
  if (opciones.classList.contains('vermenu')) {
    opciones.classList.remove('vermenu');
  } 
  opcionesUser.classList.toggle('vermenu');
});

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap');


*, body, html{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
}

:root{
    --navbar-alto: 35px;
    --navbar-ancho:100vw;
    --navbar-color: rgb(228, 226, 226);

    --navbar-texto-color: rgb(129, 129, 129);
    --navbar-texto-fuente-tamaño: 16px;

    --navbar-hover-color: rgb(218, 216, 216);
    --navbar-hover-fuente-color: rgb(19, 19, 19);

    --navbar-titulo-color: rgb(0, 0, 0);
}

/* Barra Navegacion */
.nav__bar{
    font-family: 'Montserrat', sans-serif;
    width: var(--navbar-ancho);
    height: var(--navbar-alto);
    background-color: var(--navbar-color);
    display: flex; 
    font-size: var(--navbar-texto-fuente-tamaño);
    box-shadow: 0px 0px 1px  rgb(105, 105, 105);
}

/* Estilo para los link */
.nav__bar .nav_item{
    float: left;
    display: block;
    color: #0a0a0a;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    font-size: var(--navbar-texto-fuente);
}


/*************
SECCION CON LOS ITEMS DEL MENU  
**************/
/* DROPDOWN */
.dropdown{
    float: left;
    overflow: hidden;
}

/* opciones del dropdown Menu */
.drop_contenido{
   /* display: none;
   */ position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
    z-index: 1;
    top: var(--navbar-alto);
}

/* opcion para mostrar el submenu */
.drop_contenido.mostrar{
  /* display: block;
*/}

/* opciones del submenu */
.subNavItem{
    color: black;
    padding: 8px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Hover para items y subitems */
.nav_item:hover, 
.dropdown:hover, 
.subNavItem:hover{
    background-color: var(--navbar-hover-color);
    color: var(--navbar-hover-fuente-color);
}

/*Items de la barra de navegacion*/
.items, 
.acciones_extra{
    height: var(--navbar-alto);
    width: auto;
    display: flex;
}

/*Posiciono las acciones extras*/
.acciones_extra{
    position: absolute;
    right: 5px; 
}

/* Icono de los items*/
.item_icon{
    margin-right: 5px;
}

/*dato sque aparace en span*/
.subDato{
    color: green;
    font-size: 15px;
}



/*************
SECCION TITULO DEL SISTEMA O PAGINA     
**************/
.titulo_logo{
    height: var(--navbar-alto);
    width: 240px;
    display: flex;
    text-justify: center;
    align-items: center;
}

.logo{
    height:calc(var(--navbar-alto) - 5px);
    width: calc(var(--navbar-alto) - 5px);
    max-height: var(--navbar-alto);
    border-radius: 50%;
}

.titulo{
    margin-left: 5px;
    margin-right: 10px;
    text-decoration: none;
    color: var(--navbar-titulo-color);
    letter-spacing: 1px;
    font-size: calc(var(--navbar-texto-fuente-tamaño) + 5px);
}

.icon_menu,
.icon_user{
    display: none;
}

.icon{
    color: black;
}

/*******************************************
 RESPONSIVE     
*******************************************/
@media screen and (max-width: 600px) {
    /* ICONOS */
    .icon{
        height: var(--navbar-alto); 
        padding: 10px;  
    }

    .icon:hover{
        background-color: var(--navbar-hover-color);
    }
    
    .icon_menu,
    .icon_user{
        display: block;
        position: absolute;
        color: black;
    }

    .icon_menu{
        right: 0px;
    }
    
    .icon_user{
        left: 0px; 
    }

    /* BARRA NAVEGACION */
    .nav__bar{
        position: relative;
    } 

    /* TITULO Y LOGO  */
    .titulo_logo{
        position: relative;
        margin: auto;
    }

    /* Items y datos de usuario y sistema*/
    .items, 
    .acciones_extra{
        position: absolute;/*con esto se logra que el menu ancho no interfiera con el contenido de arriba */
        background-color: var(--navbar-color);
        width: 100%;
        top: var(--navbar-alto);
        height: auto;
        display: none;
    }

    /* Clase para poder mostrar las opciones del menu general */
    .items.vermenu,  
    .acciones_extra.vermenu{
        display: block;
        display: flex;
        flex-direction: column;
    }
    
    /*Forma de mostrar los items en el menu responsive*/
    .nav_item{
        width: 100%;    
    }

    /* Contenido del submenu */
    .drop_contenido{
       position: relative;
    }


    .subNavItem{
        text-align: center;
        border: 0.1px solid yellow;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="navbar-submenu.css">
     <!-- CARGA FONT AWESOME-->
     <link rel="stylesheet" href="/fontawesome/css/all.min.css">
</head>
<body>
    <nav class="nav__bar">
        <a href="#" class="icon_menu icon" id="btnUser"><i class="fas fa-user"></i></a>
        <a href="#" class="icon_user icon" id="btnOpciones"><i class="fas fa-bars"></i></a>

        <!--SECCION TITULO DEL SISTEMA O PAGINA-->
     
        <div class="titulo_logo">
            <img src="logo.jpg" alt="" class="logo">
            <a href="#" class="titulo">Mi Aplicacion</a>
        </div>
          
        <!--SECCION CON LOS ITEMS DEL MENU -->
     
        <div class="items" id="opciones">
            <a href="#" class="nav_item">Inico</a>
            <a href="#" class="nav_item">Seccion B</a>
            <div class="dropdown">
                <a href="#" class="nav_item dropbtn">Drop 1</a>
                <div class="drop_contenido">
                    <a href="#" class="subNavItem">sub 1</a>
                    <a href="#" class="subNavItem">sub 2</a>
                    <a href="#" class="subNavItem">sub 3</a>
                    <a href="#" class="subNavItem">sub 4</a>
                </div>
            </div>
            <a href="#" class="nav_item">Contacto</a>
            <div class="dropdown">
                <a href="#" class="nav_item dropbtn">drop 2</a>
                <div class="drop_contenido">
                    <a href="#" class="subNavItem">submenu 1</a>
                    <a href="#" class="subNavItem">sub 2</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="#" class="nav_item dropbtn">Drop 3</a>
                <div class="drop_contenido">
                    <a href="#" class="subNavItem">submenu 1 </a>
                    <a href="#" class="subNavItem">sub 2</a>
                    <a href="#" class="subNavItem">sub 3</a>
                    <a href="#" class="subNavItem">submenu 4</a>
                </div>
            </div>
           


        </div><!--/ FIN Items-->
  
        <!--SECCION PARA LOS DATOS DEL USUARIO Y CERRAR SESIOn-->
        <div class="acciones_extra" id="opcionesUser">
            <a href="#" class="nav_item"><i class="fas fa-user item_icon"></i>Pedro Peres <span class="subDato">(administrador)</span></a>
            <a href="#" class="nav_item"><i class="fas fa-sign-out-alt item_icon"></i>Cerrar Sesion</a>
        </div><!--fin acciones extras-->
    </nav>




    <script src="navbarSubmenu.js"></script>

</body>
</html>

Answer 1

因此，您正在谈论的问题可以通过从类中删除顶部并将菜单移出 div 来解决。 您需要从 .drop_contenido 类中删除 top：

.drop_contenido{
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
    z-index: 1;
    /* remove this --> top: var(--navbar-alto);*/
}

并且你需要从下拉菜单中提取菜单项：

<a href="#" class="nav_item dropbtn">Drop 1</a>
<!-- place the drop item outside the dropdown div --> 
<div class="dropdown">
    <!-- Remove the Drop item from here --> 
    <div class="drop_contenido">
        <a href="#" class="subNavItem">sub 1</a>
        <a href="#" class="subNavItem">sub 2</a>
        <a href="#" class="subNavItem">sub 3</a>
        <a href="#" class="subNavItem">sub 4</a>
    </div>
</div>

如果这解决了您的问题，请将问题标记为完整?