Autor Tema: CSS menús desplegables con efecto vertical aparecer elementos Ejercicio CU01050D (Leído 2669 veces)

Dimitar Stefanov · « **en:** 18 de Enero 2016, 23:23 »

¿Por qué en el tutorial CU01050D del curso CSS en la hora de estilos se especifica el fondo de los enlaces del menu desplegable de una manera y no de otro?

A continuación pongo los dos códigos y al final concreto la pregunta.

Código HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="estilos87.css"/>
	<title>Portal web</title>
</head>
<body>
	<div id="wrap">
		<h2>CSS - Menú desplegable</h2>
		<p>aprenderaprogramar.com</p>
		<ul id="navbar">
			<li><a href="http://aprenderaprogramar.com">Libros</a>	
				<ul>
					<li><a href="http://aprenderaprogramar.com">Aprender a programar desde cero</a></li>
					<li><a href="http://aprenderaprogramar.com">Creación y administración web con Joomla</a></li>
					<li><a href="http://aprenderaprogramar.com">Lenguaje de programación Java</a></li>
				</ul>
			</li>
			<li><a href="http://aprenderaprogramar.com">Divulgación</a>
				<ul>
					<li><a href="http://aprenderaprogramar.com">Los 100 trucos de CSS</a></li>
				</ul>
			</li>
			<li><a href="http://aprenderaprogramar.com">Preguntas frecuentes</a></li>
			<li><a href="http://aprenderaprogramar.com">Humor</a>
				<ul>
					<li><a href="http://aprenderaprogramar.com">Humor informático</a></li>
					<li><a href="http://aprenderaprogramar.com">Humor bases de datos</a></li>
					<li><a href="http://aprenderaprogramar.com">Humor programación</a></li>
					<li><a href="http://aprenderaprogramar.com">Humor universidad</a></li>
				</ul>
			</li>
		</ul>
		<div class="limpiador"></div>
	</div>
</body>
</html>

Código CSS: "estilos87.css"

Código: [Seleccionar]

body {
	font: 62.5%/1.2 Arial, Helvetica, sans-serif;
	background-color: #EEE;
}
#wrap {
	font-size: 1.8em;
	width: 520px;
	padding: 20px;
	margin: 0 auto;
	background-color: #FFF;
}
#navbar {
	padding: 0;
	margin: 0;
}
#navbar li {
	list-style: none;
	float: left;
	margin: 10px;
}
#navbar li a {
	display: block;
	padding: 3px 8px;
	background-color: #5E8CE9;
	color: #FFF;
	text-decoration: none;
}
#navbar li ul {
	display: none;
	background-color: #69F;
}
#navbar li:hover ul {
	font-size: 12px;
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
}
#navbar li:hover li {
	float: none;
}
#navbar li:hover li a {
	background-color: #69F;
	border-bottom: 1px solid #FFF;
	color: #000;
}
#navbar li li a:hover {
	background-color: #8DB3FF;
}
.limpiador {
	padding: 0;
	border-style: none;
	clear: both;
}

No entiendo por qué para establecer el fondo de los enlaces de los elementos que están en: ul->li->ul->li no se seleccioná el elemento así:
#navbar li a:hover li {}
sino así:
#navbar li li a:hover {}

Ogramar · « **Respuesta #1 en:** 21 de Enero 2016, 08:40 »

Buenas dimiste tal y como lo veo yo la lectura sería:

#navbar li li a:hover {} significa "estilos a aplicar para elementos dentro de navbar dentro de li dentro de otro li que tengan el puntero encima

Se corresponde con esto:

<ul id="navbar">
         <li><a href="http://aprenderaprogramar.com">Libros</a>
            <ul>
               <li><a href="http://aprenderaprogramar.com">Aprender a programar desde cero</a></li>

Es el estilo que se aplica a Aprender a programar desde cero cuando tengas el puntero encima.

#navbar li a:hover li {} significaría "estilos a aplicar para elementos dentro de navbar dentro de li con el puntero encima y que tengan un elemento li interno"

Nota: ten en cuenta que a veces distintas expresiones pueden suponer la misma selección, es decir, muchas veces hay distintas formas de hacer las cosas y escribir los selectores. Tienes que hacer pruebas y comprobar si la expresión que quieres usar resulta adecuada. Puede ser adecuada aunque otras personas lo hagan de otra manera.

Salu2

Dimitar Stefanov · « **Respuesta #2 en:** 22 de Enero 2016, 00:45 »

Buenas tardes,

Ogramar.

Ahora ya lo veo claro. Gracias por la explicación. A veces cosas simples nos parecen complicadas.

Gracias por la ayuda.

Saludos,

dimiste

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: