Documento sin título

Me Gusta

HTML

XXXXX

XXXXX

Ejercicio de un menu explicado

si yo pongo
<html>
<body>
   <ul>
<li>Lista numero 1</li>
<li>Lista numero 2</li>
<li>Lista numero 3</li>
<li>Lista numero 4</li>
</ul>
</body>
</html>
sale:
si pongo 
<html>
        <head>
<style>
ul {
background:#F06
}
</style>
       </head>
<body>
   <ul>
<li>Lista numero 1</li>
<li>Lista numero 2</li>
<li>Lista numero 3</li>
<li>Lista numero 4</li>
  </ul>
</body>
</html>
el resultado es:
pero si selecciono la fila
<html>
        <head>
<style>
ul li {
background:#F06
}
</style>
       </head>
<body>
   <ul>
<li>Lista numero 1</li>
<li>Lista numero 2</li>
<li>Lista numero 3</li>
<li>Lista numero 4</li>
  </ul>
</body>
</html>
el resultado es
Puedes notar que si selecciono ul el fondo es en todo el bloque pero si selecciono li es color rojo es en solo la fila de la lista
si coloco li solo en vez de ul li no hay diferencia, pero
si tenemos dos menus
<html>
        <head>
<style>
#ul li {
background:#F06
}
</style>
       </head>
<body>
   <ul id="ul" >
<li>Lista numero 1</li>
<li>Lista numero 2</li>
<li>Lista numero 3</li>
<li>Lista numero 4</li>
  </ul>

  <ul>
<li>Lista numero 5</li>
<li>Lista numero 6</li>
<li>Lista numero 7</li>
<li>Lista numero 8</li>
  </ul>
</body>
</html>
la salida sera:
es decir, que podemos modificar el bloque ul
<html>
        <head>
<style>
#ul {
width:500px
}
#ul li {
background:#F06
}
</style>
       </head>
<body>
   <ul id="ul" >
<li>Lista numero 1</li>
<li>Lista numero 2</li>
<li>Lista numero 3</li>
<li>Lista numero 4</li>
  </ul>

  <ul>
<li>Lista numero 5</li>
<li>Lista numero 6</li>
<li>Lista numero 7</li>
<li>Lista numero 8</li>
  </ul>
</body>
</html>
y la salida será:
si queremos menú horizontal (usamos la propiedad inline-block o float)
ver diferencia entre display:inline-block y float
<html>
        <head>
<style>
#ul {
width:500px
}
#ul li {
background:#F06;
display:inline-block
}
</style>
       </head>
<body>
   <ul id="ul" >
<li>Lista numero 1</li>
<li>Lista numero 2</li>
<li>Lista numero 3</li>
<li>Lista numero 4</li>
  </ul>

  <ul>
<li>Lista numero 5</li>
<li>Lista numero 6</li>
<li>Lista numero 7</li>
<li>Lista numero 8</li>
  </ul>
</body>
</html>
y el resultado será
si queremos apilarlar usa la propiedad margin, pero se quieres cambiarlas de color, una forma es:
<html>
        <head>
<style>
#ul {
width:500px
}
#ul li {
background:#F06;
display:inline-block;
margin:-2px
}
#ul #primero {
background:#C9F
}
#ul #segundo {
background:#FF9
}

</style>
       </head>
<body>
   <ul id="ul" >
<li id="primero">Lista numero 1</li>
<li id="segundo">Lista numero 2</li>
<li>Lista numero 3</li>
<li>Lista numero 4</li>
  </ul>

  <ul>
<li>Lista numero 5</li>
<li>Lista numero 6</li>
<li>Lista numero 7</li>
<li>Lista numero 8</li>
  </ul>
</body>
</html>
y el resultado será:

usar selectores id esta bien pero es mejor usar pseudoclases para hacer el codigo anterior lo mas limpio posible
Una opcion es usar selectores nth:child(n)
<html>
        <head>
<style>
#ul {
width:500px
}
#ul li {
 background:#F06;
 display:inline-block;
 margin:-2px
}
#ul li:nth-child(1) {
    background: #C9F;
}

#ul li:nth-child(3) {
    background: #FF9;
}
</style>
       </head>
<body>
   <ul id="ul" >
<li> Lista numero 1</li>
<li>Lista numero 2</li>
<li>Lista numero 3</li>
<li>Lista numero 4</li>
  </ul>
  
  <ul>
<li>Lista numero 5</li>
<li>Lista numero 6</li>
<li>Lista numero 7</li>
<li>Lista numero 8</li>
  </ul>  
</body>
</html>
y  el resultado sera el mismo que el anterior con la diferencia que el codigo sera mas limpio
Supongamos que queremos hacer un menú desplegable
El truco es ir paso a paso y resolver un paso a la vez
por ejemplo, pregúntate, que es lo primero?

  1. definir la caja donde ira el menú (la llamare contenedor) y darle el aspecto CSS que deseemos
  2. luego escribir que quiero que aparezca en esa lista
  3. arreglarla con CSS y si la quiero vertical o horizontal
  4. definir los link a los que iran esas palabras en el menu
  5. ver si nevesito menu secundario y escribirlos
  6. darle aspecto con CSS a ese sub-menú y definirlo horizontal o vertical


una vez hecho mi plano procedo a resolver de uno en uno cada paso