2

Tengo el siguiente problema, quiero hacer un submenu desplegable usando HTML y CSS pero cuando uso el position:absolute en el ul del submenu, me genera un scroll dentro del header y estoy intentando que el ul quede por fuera, sin ese scroll.

El código tiene más cosas pero las borré para que no se hiciera demasiado largo el código.

El problema está en el <ul> que usa la clase sub-menu

Este es el html:

<header class="site-header">

  <h1 id="logo">Titulo</h1>

  <nav class="nav-container">
    <ul id="menu-menu-1" class="menu-principal">
      <li class="menu-item">
        <a href="#">Home</a>
      </li>
      <li class="menu-item">
        <a href="#">Nosotros</a></li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-current="page">Eventos</a>
        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">Info 1</a>
          </li>
          <li class="menu-item">
            <a href="#">Info 2</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>

</header>

Y este el css. El problema surge a partir del comentario SUBMENU

.site-header {
  background-color: var(--darkGrey);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
}

.menu-principal a {
  font-family: var(--navFont);
  color: var(--white);
  font-size: 1.8rem;
  padding: .5rem 1rem;
  display: block;
}

nav.nav-container {
  display: none;
}

.menu-principal {
  position: fixed;
  width: 100%;
  top: 130px;
  right: 100%;
  display: none;
  background-color: var(--darkGrey);
  text-align: center;
  z-index: 1;
  overflow-x: hidden;
  transition: all 2s ease;

}

.site-header.fullscreen {
  position: fixed;
  width: 100%;
  top: 0;
}

nav.nav-container.active {
  display: block;
}

.menu-principal.active {
  display: block;
  left: 0%;
  height: 100%;

}

.menu-principal.active .current_page_item a {
  color: var(--colorPrimary)
}

.menu-principal.active li a:hover {
  color: var(--colorPrimary);
}

.menu-principal li a {
  display: block;
}

/**SUBMENU**/

.menu-principal ul.sub-menu {
  display: none;
}

li.menu-item-has-children:hover .sub-menu {

  display: flex;
  flex-direction: column;
  position: absolute;
  width: 150%;
  z-index: 1000;
}

1 respuesta 1

1

Tienes problemas, pero básicamente tu Css, NO SABES QUE LES ESTAS DICIENDO

Ya que tienes 2 contenedores en una position fixed, 1 elementos donde utilizas flexbox y otro con posición absoluta,

primero quita el flexbox, por que te darás cuenta que como css, los elementos hijo es afectado por el padre, posterior , solo 1 de tus elementos debe tener la posición de fixed, si no tu html , no sabrá que hacer , y tendrás un amontonamiento de elementos.

.site-header {
  background-color: var(--darkGrey);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
}





.menu-principal {
  position: fixed;
  width: 100%;
  top: 130px;
  right: 100%;
  display: none;
  background-color: var(--darkGrey);
  text-align: center;
  z-index: 1;
  overflow-x: hidden;
  transition: all 2s ease;

}

.site-header.fullscreen {
  position: fixed;
  width: 100%;
  top: 0;
}



li.menu-item-has-children:hover .sub-menu {

  display: flex;
  flex-direction: column;
  position: absolute;
  width: 150%;
  z-index: 1000;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.