Al igual que hemos creado un menú vertical simple, podemos crear otro del mismo molde pero con bordes discontinuos (dashed). (Si lo deseas también puedes mirar como crear un menú horizontal simple con CSS).
Este menú, al igual que el anterior menú vertical que creamos y que hemos mencionado anteriormente, está creado mediante listas. Simplemente daremos estilos a las listas, estilos que después llamaremos por medio del código HTML gracias al atributo id.
Código CSS
Si nos fijamos, en “#vertmenu ul li a” aplicamos un borde discontinuo en el borde inferior (bottom).
#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}
#vertmenu h1 {
display: block;
background-color:#FF9900;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}
#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}
#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}
Código HTML
<div id="vertmenu"> <h1>Navegacion</h1> <ul> <li><a href="#" tabindex="1">Tu texto</a></li> <li><a href="#" tabindex="2">Tu texto 2</a></li> <li><a href="#" tabindex="3">Tu texto 3</a></li> <li><a href="#" tabindex="4">Tu texto 4</a></li> <li><a href="#" tabindex="5">Tu texto 5</a></li> <li><a href="#" tabindex="6">Tu texto 6</a></li> </ul> </div>
Estandarización
XHTML 1.0 Strict válido.
CSS 2.1 válido.
Vía | CSSDrive
