1

Hola amigos he intentado posicionar un elemento desplegable (del 2 a 3) a la derecha con "left" y "top", la cosa funciona bien pero el problema radica que si el tamaño del elemento 1 cambia el bloque se desfigura posicionando mal quedando un espacio entre el 1 y el 3.

No se como se puede solucionar ya me ha causado un error de cabeza, el left y top podría llegar a funcionar pero si llega el bloque 1 a cambiar su ancho ya no funcionaria el top y left

Menú

Código css:

/*Menus*/
#container a{
    color: #fff;
}
#container{
    margin: 0 auto;
    flex-grow: 1;
    text-align: center;
}
#container nav{
    margin: 0px 0;
    background-color: #0f131f;
}
#container nav ul{
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
#container nav ul li{
    display: inline-block;
    background-color: #0f131f;
}
#container nav a{
    display: block;
    padding: 0 10px;
    color: #fff;
    font-size: 20px;
    line-height: 60px;
    text-decoration: none;
}
#container nav a:hover{
    background-color: #5f5c5c;
}
#container nav ul ul{
    display: none;
    position: absolute;
}
#container nav ul li:hover > ul{
    display: flex;
    flex-direction: column;
}

#container nav ul ul li{
    width: 100%;
    display: list-item;
    position: relative;
    text-align: left;
}
**Este es el bloque que intento posicionar a la derecha (del 2 a 3) como en imagen**
#container  nav ul ul ul li { 
    position: relative;
}
#container li > a:after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: " \f107";
}
#container li > a:only-child:after {
    content: "";
}

Esperando que me puedan ayudar, Saludos Amigos!

1 respuesta 1

0

Para lograr lo que describís en la imagen, necesitás declarar en el ul un position: absolute y top: 0. De esta manera, se superpondrá al li que está desplegando este menú.

Como no queremos que se superponga y necesitamos mostrarlo a su derecha, declarás un left:100%. Lo que esto hace es tomar el ancho del li padre y usarlo como una especie de margin-left.

De todos modos acá te dejo el código.

#container nav ul li ul li ul {
    position: absolute;

    /* al tener un position absolute, el top 0 hará que
    el ul se superponga al li padre */
    top: 0;

    /* con el left al 100%, se toma el ancho del li padre
    y podríamos decir que actua de margin-left,
    evitando la superposición antes mencionada */
    left: 100%;
    
    /* el ancho del li establecido en max-content para que
    el contenido encaje según el texto que tenga */
    width: max-content;
}

El position: absolute ya lo tenías declarado, pero de todos modos te lo dejo ahí como para que sea explícito.

1
  • Comento que has colocado el código dentro de un snippet (fragmento de código) y este está diseñado para que se ejecute en el navegador y se pueda comprobar su funcionamiento (como parte de una respuesta o de una pregunta). Pero tu código, al solo ser CSS, no produce ningún resultado al darle ejecutar, y por tanto, debiera estar publicado solo como código. He editado la respuesta para que quede de esta manera.
    – jachguate
    Commented el 14 may. 2023 a las 5:01

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.