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: 180px; border-top-width: 10px; border-bottom-width: 10px; border-top-style: solid; border-bottom-style: solid; border-top-color: #F3F3F3; border-bottom-color: #F3F3F3; } #contenitoremenu ul { margin-left: 0px; padding-left: 0px; list-style-type: none; } #contenitoremenu a { display: block; width: 165px; background-color: #FFF; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 10px; height: 20px; color: #000; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: -10px; border-left-width: 10px; border-left-style: solid; border-left-color: #FFF; border-right-width: 10px; border-right-style: solid; border-right-color: #FFF; } #contenitoremenu a:link, #contenitoremenu a:visited { color: #000; text-decoration: none; background-color: #FFF; } #contenitoremenu a:hover, #contenitoremenu a:active { background-color: #F3F3F3; color: #000; border-left-width: 10px; border-left-style: solid; border-left-color: #F60; border-right-width: 10px; border-right-style: solid; border-right-color: #F60; } #elementocorrente a:link, #elementocorrente a:visited { color: #000; text-decoration: none; border-left-width: 10px; border-left-style: solid; border-left-color: #F60; border-right-width: 10px; border-right-style: solid; border-right-color: #F60; } #elementocorrente a:hover, #elementocorrente a:active { background-color: #F3F3F3; color: #000; text-decoration: none; border-left-width: 10px; border-left-style: solid; border-left-color: #F60; border-right-width: 10px; border-right-style: solid; border-right-color: #F60; }