1

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

Cómo está actualmente

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> &nbsp;<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>

1
  • Richard, por favor, tómate un minuto para que evalúes marcar la respuesta que consideres correcta.
    – gugadev
    Commented el 28 abr. 2017 a las 12:41

2 respuestas 2

1

Prueba esto, atento a los enlaces del nombre y la puntación, donde he colocado "style:display-line", mueve esa propiedad al css si quieres para que lo tengas más controlado, pero básicamente era eso y ponerle una anchura al dropdown.

* {
	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 {
  width: 325px;
	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> &nbsp;<i class="fa fa-caret-down"></i></a></div>
  
	<div class="dropdownContent"> <!-- Contenido que se muestra al pasar el raton por encima de parteArriba -->
  
  	<span class="contenidoArribaDerecha">
    
    <span><a style="display:inline;" href=""><img src="profile.png"></a></span>
    
			<span class="nombreCompleto">Nombre Apellido</span>
			<span class="nickYPuntuacion">
				<div class="nick"><a style="display:inline;" href="">nickusuario</a></div>
				<div class="puntuacion">( <a style="display:inline;" href="">10</a> <i class="fa fa-star"></i> )</div>
			</span>
		</span>
		
		<a href="">Mi perfil</a>
		<a href="">Muestra todas las configuraciones</a>
		<a href="">Desconectarse</a>
	</div>
</div>
</body>
</html>

3
  • Al final lo he hecho usando tablas. He probado las respuestas que me habéis dado y, aunque útiles, estaba buscando algo más preciso. Commented el 9 abr. 2017 a las 0:46
  • Haces bien, nuestras respuestas solucionaban tu pregunta pero no de un modo optimo.
    – Edu
    Commented el 9 abr. 2017 a las 1:29
  • Gracias de todas maneras, algo nuevo he aprendido. No obstante, adjunto el pantallazo de cómo ha quedado al final: [i.gyazo.com/0f9e17e9df1a76bc103c0d5d76cb83cf.jpg] Commented el 9 abr. 2017 a las 12:12
0

1.Prueba con este codigo.

 {
	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;
}
.contenidoArribaDerecha{
	align-content: right;
}

.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> &nbsp;<i class="fa fa-caret-down"></i></a></div>
	<div class="dropdownContent"> <!-- Contenido que se muestra al pasar el raton por encima de parteArriba -->
		<table>
		<tr>
		<td><a href=""><img src="profile.png"></a></td>
		<td><div  align="riht"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<i class="fa fa-star"></i> )</a></div>
			</div>
		</div></td>
		</tr>
		</table>
		<a href="">Mi perfil</a>
		<a href="">Muestra todas las configuraciones</a>
		<a href="">Desconectarse</a>
	</div>
</div>
</body>
</html>

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.