Clean Arrow Underline Menu

S

ebagai contoh bisa anda lihat disini:DEMO
Cara pembuatan nya:
Cari kode: ]]></b:skin>
copas kode css dibawah ini dan letakkan di atas nya:

<style> ul.arrowunderline{ list-style-type:none; margin:0; padding:0; text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */ font: bold 16px Georgia; } ul.arrowunderline li{ display:inline; margin-right:25px; /* spacing between each menu item */ } ul.arrowunderline li a{ position:relative; color:white; padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */ text-decoration:none; } ul.arrowunderline li a:hover{ border-bottom:3px solid red; /* style of arrow underline */ } ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */ content:''; width:0; height:0; position:absolute; left:50%; margin-left:-5px; /* value should match border-width below */ bottom: 0; border-width:5px; /* value should match margin-left above */ border-style:solid; border-color: transparent transparent purple transparent; /* create up arrow */ } </style>

Contoh Penerapan nya:

<ul class="arrowunderline">
<li><a href="http://frogstomps.blogspot.com">Home</a></li>
<li><a href="http://frogstomps.blogspot.com">New</a></li>
<li class="selected"><a href="http://frogstomps.blogspot.com">Revised</a></li>
<li><a href="http://frogstomps.blogspot.com">Tools</a></li>
<li><a href="http://frogstomps.blogspot.com">CSS</a></li>
<li><a href="http://frogstomps.blogspot.com">Forums</a></li>
</ul>

Selamat Mencoba