Come realizzare un semplice menu verticale con i CSS?

Utente HTML.it
chiede

Come realizzare un semplice menu verticale con i CSS?

Redazione HTML.it
risponde

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;
}

>> Leggi di più su come realizzare menu con i CSS