Diseño de Menus verticales

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 ".vmenu" que sera aplicado a la etiqueta <ul>

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

• .vmenu "Es el selector de clase .vmenu"
  - Eliminamos las viñetas de la lista con (list-style-type:none;)
  - Quitamos los margenes y rellenos predeterminados (margin:0px;padding:0px;)
• .vmenu li "Selector contextual que afecta a los li que estan dentro de .vmenu"
  
• .vmenu li a "Selector contextual que afecta a los elementos a que estan dentro de li y además que esten dentro de .vmenu"
• .vmenu li a:hover "Selector contextual que afecta a los elementos a:hover que estan dentro de li y además que esten dentro de .vmenu"
  - 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 ".vmenu" con la lista HTML mediante el atributo class de este modo:

<ul class="vmenu">
<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á: