Vertical navigation menu consists of a list <UL> with rollover effect
Example
Code Html
<div id="contenitoremenu">
<ul id="listamenu">
<li id="elementoattivo"><a href="#">Home</a></li>
<li><a href="#">Chi sono</a></li>
<li><a href="#">Portfolio lavori</a></li>
<li><a href="#">Servizi</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
Code CSS
#contenitoremenu { width: 100px; display: block; border: 1px dashed #000; padding: 10px; height: 540px; margin-top: 10px; } #listamenu { display: block; list-style: none; margin: 0px; padding: 0px; } #listamenu li { list-style: none; border: 8px solid #CCC; text-align: center; background: #fff; display: block; float: left; color: #000; height: 80px; width: 80px; margin-top: 3px; margin-right: 3px; margin-bottom: 10px; margin-left: 3px; } #listamenu li a:link, #listamenu li a:visited { margin: 1px; padding: 0px; border: 1px solid #000; font-weight: bold; display: block; width: 76px; text-decoration: none; color: #000000; height: 76px; } #listamenu li a:hover, #listamenu li a:active { margin: 1px; padding: 0px; font-weight: bold; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #CCC; border-right-color: #CCC; border-bottom-color: #CCC; border-left-color: #CCC; background-color: #F3F3F3; } #listamenu li#elementoattivo { font-weight: bold; border: 8px solid #036; background-color: #F3F3F3; }