Link copiato negli appunti
Per i menu di navigazione con i CSS, nell’HTML conviene usare una lista per contenere i link. Questa infatti è la scelta più logica e ci consente di ottenere molta libertà nella presentazione grazie ai CSS. Ecco il codice HTML:
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Prodotti</a></li>
<li><a href="#">Servizi</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
Ecco come realizzare un menu verticale con i CSS a partire da questo codice:
div#menu ul
{
float:left;
width:120px;
list-style:none;
margin:0;
padding:0;
border-top: 1px solid #2693FF;
}
div#menu ul li
{
margin:0;padding:0;
border: 1px solid #2693FF;
border-width: 0 1px 1px 1px
}
div#menu a
{
display: block;
height: 25px;
line-height: 25px;
text-decoration:none;
padding-left:5px;
background-color: #FFFFC5;
color: #41418A;
}
div#menu a:hover
{
background-color: #FF7E00;
color: #fff;
}