Meniu orizontal simplu cu stilul CSS

Un meniu este o piesa importanta intr-un blog pentru ca ne ajuta sa punem ordine in continutul lui. Un meniu creat cu CSS este mai usor de adaugat pe un blog decat un meniu creat cu un script.

• HOME
• Enlace-1
• Enlace-2
• Enlace-3
• Enlace-4

Acest meniu este foarte usor de adaptat la un blog pentru ca exsta posibilitatea de al adapta la culoare sau dimensiune cu respectivul. Pentru adaugare mergem la Aspect --> HTML/Javascript si inainte de linia ]]></b:skin> adaugi urmatorul cod CSS:

#navigation {
margin-left:100px; /* Margina stanga */
top:25px; /* Margina sus */
}
#navigation li {
float:left;
}
#navigation a {
background-color:#000000; /* coloare de fond */
border-bottom:3px solid #FFFFFF; /* Línie inferioara *
color:#FFFFFF; /* Coloare de text */
display:inline-block;
font-size:13px; /* Marime de text */
font-weight:normal;
margin-right:1px;
padding:10px 20px 10px; /* Inaltime si latime de meniu */
text-decoration:none;
text-transform:uppercase; /* Litere mari */
text-shadow:0 1px 1px #CDCDCD ;/* Umbra text */
}
#navigation a:hover {
border-bottom:3px solid #05C7C0; /* Linia inferioara cand trece mouser-ul (hover) */
color:#05C7C0; /* Culoare cand trece mouser-ul (hover) */
}
#navigation li.selected a {
border-bottom:3px solid #05C7C0; /* Coloare linie inferioara fixa (Home) */
color:#05C7C0; /* Coloare text fix(Home) */
}
#navigation ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}

salveaza modificarile,si ultimul pas deschide un gadget HTML/Javascript si adaugi urmatorul cod HTM:

<div id='navigation'>
<ul>
<li class='selected'><a href='#'>HOME</a></li>
<li><a href='#'>Link-1</a></li>
<li><a href='#'>Link-2</a></li>
<li><a href='#'>Link-3</a></li>
<li><a href='#'>Link-4</a></li>
</ul>
</div>

In acest cod se poate inlocui Home sau Link cu ce doreti tu sa para in meniu