0

Me encuentro diseñando un menú y deseo saber que propiedad le puedo dar a una lista para que cuando se posicione el mouse por encima de su contenedor esta se muestre.

Por el momento esto es el resultado de lo que tengo momentáneamente. introducir la descripción de la imagen aquí

Como se puede ver la lista se superpone al contenedor que la esta almacenando.

<nav class="menu">
                  <ul class="nivel1">
                     <li><a href="#">equipos de hogar</a></li>
                     <li><a href="#">laptops</a></li>
                     <li><a class="desplegable">componentes<span class="icon-down-open"></span></a>
                        <ul class="submenu nivel2">
                           <li><a href="#">procesadores</a></li>
                           <li><a href="#">tarjetas de video</a></li>
                           <li><a href="#">motherboards</a></li>
                           <li><a href="#">ram</a></li>
                           <li><a class="desplegable">almacenamiento<span class="icon-right-open cambioFlecha"></span></a>
                              <ul class="submenu nivel3">
                                 <li><a href="#"><b>ssd</b></a></li>
                                 <li><a href="#"><b>hdd</b></a></li>
                                 <li><a href="#"><b>externo</b></a></li>
                              </ul>
                           </li>
                           <li><a href="#">case</a></li>
                           <li><a href="#">fuentes de poder</a></li>
                           <li><a href="#">enfriamiento</a></li>
                           <li><a class="desplegable">periféricos<span class="icon-right-open cambioFlecha"></span></a>
                              <ul class="submenu nivel3">
                                 <li><a href="#"><b>mouse</b></a></li>
                                 <li><a href="#"><b>teclado</b></a></li>
                                 <li><a href="#"><b>micrófono</b></a></li>
                                 <li><a href="#"><b>parlantes</b></a></li>
                                 <li><a href="#"><b>headset</b></a></li>
                              </ul>
                           </li>
                        </ul>
                     </li>
                     <li><a href="#">monitores</a></li>
                     <li><a href="#">impresoras</a></li>
                  </ul>
</nav>
.menu {
   margin: auto;
   background: #000;
   color: #31B9DD;
   font-size: 0.7500em;
   text-transform: uppercase;
   display: flex;
   align-items: center;
}
.menu ul {
   list-style: none;
   display: flex;
}
.menu a {
   display: block;
   text-decoration: none;
   padding: 0 15px;
   color: #31B9DD;
   cursor: pointer;
}
.menu a:hover {
   color: #CC3914;
}
.menu a span {
   margin-left: 5px;
   cursor: pointer;
}
.menu ul ul {
   display: none;
}
.menu ul li:hover ul {
   display: block;
   position: absolute;
   transform: translateY(-33px);
   top: auto;
}
.menu ul ul ul li{
   display: none;
}
.menu ul ul li:hover ul li {
   display: block;
   position: relative;
}
.submenu{
   display: none;
}

¿Quisiera saber si hay forma de hacer que se visualice por la parte inferior del supuesto borde de abajo que tiene el menú?

Ya que quitando la popiedad transform: translateY(-33px) de .menu ul li:hover ul si empieza al finalizar pero la sublista de nivel 3 igualmente empieza más abajo de lo que debería, como se puede ver en la siguiente imagen. introducir la descripción de la imagen aquí

1 respuesta 1

0

La solución que encontré fue que ocupé la clase que se encuentra especificada en el ul que es .nivel3 y mediante el css omití la propiedad transform: translateY(-33px); de la clase .menu ul li:hover ul y la cambié a la antes mencionada.

.nivel3 {
   width: inherit;
   background: #4D5159;
   left: 100%;
   transform: translateY(-33px);
}
.menu {
   width: 90%;
   margin: auto;
   background: #000;
   font-size: 0.7500em;
   text-transform: uppercase;
   display: flex;
   align-items: center;
}
.menu ul {
   list-style: none;
   display: flex;
}
.menu a {
   display: block;
   text-decoration: none;
   color: #31B9DD;
   padding: 0 15px;
   cursor: pointer;
}
.menu a i {
   margin-left: 5px;
   cursor: pointer;
}
.menu ul ul {
   display: none;
}
.menu ul li:hover ul {
   display: block;
   position: absolute;
   top: auto;
   top: initial;
}
.menu ul ul ul li {
   display: none;
   position: sticky;
}
.menu ul ul li:hover ul li{
   display: block;
   position: relative;
}

el resultado es: introducir la descripción de la imagen aquí

Tu Respuesta

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

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