En este menú de navegación vertical se usan lineas como separadores, de color gris y de forma solida. Es un menú de navegación bastante sencillo.

Forma vertical

HTML
<div id=”barranav”>
<ul id=”listanav”>
<li id=”activo”><a href=”#” id=”actual”>Item uno</a></li>
<li><a href=”#”>Item dos</a></li>
<li><a href=”#”>Item tres</a></li>
<li><a href=”#”>Item cuatro</a></li>
<li><a href=”#”>Item cinco</a></li>
</ul>
</div>

CSS
#listanav
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 200px;
}

#listanav li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}

#listanav li a { text-decoration: none; }

Tags: listas css