Ti trovi in: Home > CSS Menu > Menu n.02/V

CSS Menu - CSS Menu Design

CSS Menu verticali

Menu n.02/V - Source XHTML e CSS

Semplice menu con bordo laterale destro e descrizioni che cambiano colore sul link attivo e al passaggio del mouse.

Link 1
Link 2
Link 3
Link 4
Link 5

(X)HTML:

<div id="menu02v">
 <ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
 </ul>
</div>

CSS:

#menu02v{
width: 10em;
font: 80% Arial, Helvetica, sans-serif;
}
#menu02v ul{
margin: 0;
padding-left: 0;
list-style: none;
}
#menu02v li{
font-size: 1.1em;
display: inline;
margin: 0;
padding: 0;
}
#menu02v a:link, #menu02v a:visited{
display: block;
background: #fff;
color: #05181E;
margin: 0;
padding: 0.3em 0.6em 0.3em 0;
text-decoration: none;
text-align:right;
border-right: 5px solid #00C000;
}
#menu02v a:hover, #menu02v a:focus, #menu02v a:active{
border-color: #05181E;
text-decoration: none;
color: #00C000;
background-color: #fff;
}