Meniu orizontal in culori cu CSS

Un interesant meniu orizontal in culori adaptat pentru blogger realizat cu CSS.Mai jos este doar o imagine dar il poti vedea cum apare instalat pe blog in exemplul urmator: click aici

Cum se instaleaza acest meniu?
Mergi la Aspect (Desing) --> Editare HTML cauta linia ]]></b:skin> si exact inaintea ei adaugi urmatorul cod CSS:

#middle {
width: 765px;
float:center;
padding:10px 10px 10px 10px;
margin:10px 0;
background:#BDDFEB url() no-repeat;
}
.category {
width:133px;
float:left;
border-top:8px solid #333;
margin:5px;
padding:15px 10px 10px 10px;
background:#33AAFF;
}
.category p {
margin:0;
}

#cat-1 {width:133px; margin:0; border-top:8px solid #9977FF; color:#000000;}
#cat-2 {width:133px; margin:0; border-top:8px solid #66BB88; color:#000000;}
#cat-3 {width:133px; margin:0; border-top:8px solid #FF55FF; color:#000000;}
#cat-4 {width:133px; margin:0; border-top:8px solid #9911FF; color:#000000;}
#cat-5 {width:133px; margin:0; border-top:8px solid #FFDD33; color:#000000;}

#cat-1 h2, #cat-2 h2, #cat-3 h2, #cat-4 h2, #cat-5 h2 {
text-transform:lowercase;
margin:0;
font-weight:bold;
font-size:1.5em;
letter-spacing:-0.05em;
color:#333;
}
.category a {
color:#ffffff;
display:block;
background:none;
}
.category a:hover {
background:none;
color:#fff;
text-decoration:none;
}
#cat-1:hover {background:#9977FF; color:#352726; }
#cat-2:hover {background:#66BB88; color:#352726; }
#cat-3:hover {background:#FF55FF; color:#352726; }
#cat-4:hover {background:#9911FF; color:#352726; }
#cat-5:hover {background:#FFDD33; color:#352726; }
#cat-1 h2 a:hover, #cat-2 h2 a:hover, #cat-3 h2 a:hover, #cat-4 h2 a:hover, #cat-5 h2 a:hover {
color: #fff;
}

verifica daca totul este bine si salveaza modificarile.

Pasul 2 Editare nou gadget HTML/Javascript si adauga urmatorul cod html:

<div class='clearfloat' id='middle'>
<div class='cat-1'>
<div class='category section' id='cat-1'><div class='widget text' id='text1'>
<h2 class='title'><a href='URL 1'></a></h2><b>TEXTUL 1</b>
</div></div></div>

<div class='cat-2'>
<div class='category section' id='cat-2'><div class='widget text' id='text2'>
<h2 class='title'><a href='URL 2'></a></h2><b>TEXTUL 2</b>
</div></div></div>

<div class='cat-3'>
<div class='category section' id='cat-3'><div class='widget text' id='text3'>
<h2 class='title'><a href='URL 3'>/a></h2><b>TEXTUL 3</b>
</div></div></div>

<div class='cat-4'>
<div class='category section' id='cat-4'><div class='widget text' id='text4'>
<h2 class='title'><a href='URL 4'></a></h2><b>TEXTUL 4</b>
</div></div></div>

<div class='cat-5'>
<div class='category section' id='cat-5'><div class='widget text' id='text5'><h2 class='title'><a href='URL 5'></a></h2><b>TEXTUL 5</b>
</div></div></div></div>

Latimea de meniu se poate modifica de aici:
#middle {
width: 765px;

Se poate schimba culoarea textului de aici:
.category a
color:#ffffff;

La fel se poate schimba culoarea textului cand trece mouse-ul :
.category a:hover
color:#fff;

Pare un pic complicat cu atatea modificari dar merita incercat.