Meniu orizontal foarte simplu efect hover cu sageata

---

Acest meniu nu spun ca, este ceva nou si nici spectaculos dar este un meniu foarte simplu de aplicat, deschizi un nou gadget HTML/Javascript si adaugi codul de mai jos, daca esti atent, vezi unde se pot face modificari pentru adaptarea sa pe blogul tau.

Pentru url-link inlocuiesti ca de obicei cu link-ul care doresti sa apara, si Text 1-2-3-4-5-6 il schimbi cu descrierea ce vrei sa apara in meniu. Vezi cum arata meniul aici:

<style>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* poate sa fie "left", "right" o "center" */
font: bold 18px Georgia; /* marime litere */
}
ul.arrowunderline li{
display:inline;
margin-right:25px; /* spatiu intre link-uri */
}
ul.arrowunderline li a{ /* culoare text este neagra */
position:relative;
color:black;
padding-bottom:8px; /* distanta intre sageata si text */
text-decoration:none;
}
ul.arrowunderline li a:hover{
border-bottom:3px solid red; /* grosimea liniei de la sageata si culoarea este red */
}
ul.arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent red transparent; /* culoarea liniei este red */
}
</style>

<ul class="arrowunderline">
<li><a href="url-link">Text 1</a></li>
<li><a href="url-link">Text 2</a></li>
<li class="selected"><a href="url-link">Text 3</a></li>
<li><a href="url-link">Text 4</a></li>
<li><a href="url-link">Text 5</a></li>
<li><a href="url-link">Text 6</a></li>
</ul>

SUCCES !