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
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!