Estoy intentando hacer un menú desplegable y tengo un problema en una parte del código que no se cómo resolver.
Lo que quiero hacer es posicionar correctamente los elementos que ya tengo creados, de tal modo que queden así: Cómo quiero que queden
El caso es que he probado con las propiedades position y display, pero no consigo posicionarlos de la manera que he explicado.
Adjunto código actual (he quitado el código que he probado para aportar mayor claridad y menor confusión):
* {
margin: 10;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
/*Menu hoverable*/
/* https://www.w3schools.com/howto/howto_css_dropdown.asp */
.dropDown {
position: relative;
display: inline-block;
}
#usuario {
font-weight: bold; /* Hace que salga en negrita el nombre del usuario */
}
.parteArriba {
display: inline-block; /* evita que el borde azul de arriba ocupe todo el ancho del navegador */
}
.parteArriba a {
text-decoration: none;
color: black;
font-size: 12px;
padding-left: 15px;
padding-right: 10px;
padding-top: 3px;
border-top: 2px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
}
.parteArriba a:hover {
color: #0654BA;
border-top: 2px solid #7087B1;
border-left: 1px solid #DEDCDD;
border-right: 1px solid #DEDCDD;
}
.dropdownContent {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border: 1px solid #DEDCDD;
border-top: 0;
}
.dropdownContent a {
display: block;
text-decoration: none;
color: #0654BA;
font-size: 12px;
margin-left: 10px;
margin-bottom: 10px;
}
.dropdownContent a:hover {
text-decoration: underline;
}
.dropdownContent a img {
margin-top: 10px;
}
.dropDown:hover .dropdownContent {
display: block;
}
.nick a {
font-weight: bold;
color: black;
}
.fa-star {
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://use.fontawesome.com/665c563187.js"></script>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<div class="dropDown">
<div class="parteArriba"><a href="#">Hola <span id="usuario">usuario!</span> <i class="fa fa-caret-down"></i></a></div>
<div class="dropdownContent"> <!-- Contenido que se muestra al pasar el raton por encima de parteArriba -->
<div class="contenidoArribaDerecha">
<div class="nombreCompleto">Nombre Apellido</div>
<div class="nickYPuntuacion">
<div class="nick"><a href="">nickusuario</a></div>
<div class="puntuacion">( <a href="">10</a> <i class="fa fa-star"></i> )</div>
</div>
</div>
<a href=""><img src="profile.png"></a>
<a href="">Mi perfil</a>
<a href="">Muestra todas las configuraciones</a>
<a href="">Desconectarse</a>
</div>
</div>
</body>
</html>