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;
}