Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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:
<!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"
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 {}
-
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
-
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