30. Menú vertical 1 nivel

Fuente: http://www.oloblogger.com/search/label/CSS

Sombra ara texto: http://www.oloblogger.com/2014/06/borde-texto-stroke-shadow.html

<div id="lateral">		<!-- caja: lateral -->
  <div class="mV">		<!-- caja: navegación vertical -->
    <ul class="menu">
      <li><a href="#">Uno</a></li>
      <li><a class="activo" href="#" href="#">Dos mediano</a></li>
      <li><a href="#">Tres más largo</a></li>
    </ul>
  </div>
</div>

CSS

.menu {
	list-style: none;			/* Elimina decoración de listas */
	float: left;
	font-size: 1.1em;
  
}
.menu li a:link, .menu li a:visited {
	text-decoration: none;			/* Elimina decoración de links */
	display: block;				/* Convierte toda la línea en link */
	color: #000000;				/* Color de letra del ítem */
	padding: 2px 10px;			/* Relleno de items de menu */
  border-radius: 5px;
border: 1px dotted #000;
}
.menu li a.activo {
	color: #000;				/* Color de letra del ítem activo */
	background:#59FFFC;			/* Color de fondo del ítem activo */
}
.menu li a:hover {
	color: #ffffff;				/* Color de letra al pasar el cursor */
	background: #ADFAFF;        		/* Color de fondo al pasar el cursor */
	box-shadow: 0px 3px 3px #111111;
}
.mV {						/* Contenedor del menú vertical */
	margin: 0 0 0 10px;
}
.mV li {							
	margin: 4px 0;				/* Separa ítems verticalmente */
	background:-webkit-gradient(linear, 44% 100%, 46% 0%, from(#FFFFFF), to(#C8FFFF))			/* Fondo ítems */
}