Código fuente Ya.

Puede ejecutar la o las páginas para probar el concepto inmediatamente.

 

Concepto:Barra de menú vertical

El concepto trata sobre:html,css
Autor:

Retornar

Nombre del archivo:pagina1.html

Comentarios
El menú vertical tendrá tantas opciones como elementos de tipo <li>
tenga la lista.
Como la hoja de estilo se define en un archivo separado debemos
importarla con la sintaxis:
<link rel="StyleSheet" href="estilos.css" type="text/css">
Nombre del archivo:estilos.css

Comentarios
Indicamos las siguientes propiedades para los elementos de tipo li 
contenidos en menuvertical:

#menuvertical li {
  display:block;
  border-bottom:1px solid #406480;
  width:200px;
  background:#cfdce6;
}

Cada rectángulo tendrá una línea horizontal en la parte inferior:
  border-bottom:1px solid #406480;
el color de fondo del rectángulo:
  background:#cfdce6;
tendrá un ancho:
  width:200px;
El valor block para la propiedad display permite que el ancla ocupe todo el espacio del párrafo,
indistintamente del largo del hipervínculo:
  display:block;

Definimos los colores para cuando la flecha del mouse se encuentra dentro del rectángulo:
#menuvertical li a:hover {
  color:#333;
  background:#f0f0f0;
}

y los colores para cuando está activa:
#menuvertical a.active {
  color:#333;
  background:#f0f0f0;
}

Retornar



Código Fuente Ya - 2015