Menu LIGHT

Créditos aqui

Coloque o código abaixo no seu CSS, se você usa novo blogger coloque no HTML antes de ]]></b:skin>.

<STYLE type="text/css">
#menuhori {
list-style: none;
float: left; /* NÃO MEXA AQUI */
height: 40px; /* ALTURA DO MENU */
width: 980px; /* LARGURA DO ESPAÇO EM QUE VOCÊ VAI COLOCAR ELE */
padding-left:15px;
margin-top: 22px;
}
#menuhori ul {
padding: 0px;
margin: 0px;
float: left;
width: 100%;
list-style:none;
font-weight: bold;
height: 18px;
line-height: 20px;
vertical-align:middle;
}
#menuhori ul li {
display: block;
float: left;
margin: 1px;
width: auto;
text-align: center;
border:0px;
}
#menuhori ul li a {
display: block;
width: 131px;
text-align: center;
font-size: 10px;
font-family : Verdana, Arial, sans-serif;
text-decoration: none;
color: #D7AAFF; /* COR DA FONTE */
background-color: #F8F0FF; /* COR DO FUNDO */
border:1px solid #D7AAFF; /* COR DA BORDA */
vertical-align:middle;
}
#menuzinhoh ul li a:hover, #menu li.current a {
color: #B664FF; /* COR DA FONTE QUANDO PASSA O MOUSE */
background-color: #EAD2FF; /* COR DO FUNDO QUANDO PASSA O MOUSE */
text-decoration: none;
border:1px solid #B664FF; /* COR DA BORDA QUANDO PASSA O MOUSE */
}
</style>

Para fazer com que seu menu funcione, coloque o seguinte código onde você quer que ele apareça:

<div id"menuzinhoh"><a href="ENDEREÇODOLINK">NOMEDOLINK</a></div>

Seu menu ficará assim:



A parte mais clara é ele normal, e a parte mais escura é quando passar o mouse em cima!