Diseño de Menu Horizontal

Paso 1 Colocar los enlaces en una lista

Debemos estructurar nuestros enlaces y la mejor forma es colocarlos en una lista y mediante el CSS modificaremos su apariencia.

<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>

Con lo cual obtendriamos:

• Enlace 1
• Enlace 2
• Enlace 3
• Enlace 4

Paso 2 definimos las propiedades css

crearemos un selector de clase llamado ".hmenu" que sera aplicado a la etiqueta <ul>

.hmenu{list-style-type:none;margin:0px;padding:0px;}
.hmenu li{float:left;height:20px;
         border-right:1px solid #fff;
         text-align:center;}
.hmenu li a{height:20px;display:block;width:122px;
            padding-left:5px;
            background:#009F00;color:#fff;
            text-decoration:none;}
.hmenu li a:hover{background:#00B300;color:#fff;}

• .hmenu "Es el selector de clase"
  - Eliminamos las viñetas de la lista con (list-style-type:none;)
  - Quitamos los margenes y rellenos predeterminados (margin:0px;padding:0px;)
• .hmenu li "Selector contextual que afecta a los li que estan dentro de .hmenu"
  - convertimos el menu en uno horizontal mediante la propiedad (float:left)
• .hmenu li a "Selector contextual que afecta a los elementos a que estan dentro de li y además que esten dentro de .hmenu"
• .hmenu li a:hover "Selector contextual que afecta a los elementos a:hover que estan dentro de li y además que esten dentro de .hmenu"
  - Nota: a:hover indica las propiedades que se mostraran cuando el puntero esta sobre el enlace.

Paso 3 Relacionamos las propiedades css al HTML

Ahora relacionamos el selector de clase ".hmenu" con la lista HTML mediante el atributo class de este modo:

<ul class="hmenu">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>

El resultado final será: