DEMO KODLARIN ALTINDADIR
<style type="text/css">
@charset "utf-8";
/* CSS Document */
<style>
.arrowunderline{
}
.arrowunderline ul {
width:500px;
list-style-type:none;
margin:0;
padding:0;
text-align:center;
font: bold 15px Georgia;
}.arrowunderline ul li{
border-left:2px solid #999;
display:inline;
padding-left:5px;
padding-right:5px;
}.arrowunderline ul li a{
position:relative;
color:black;
padding-bottom:6px; /*mouse üzerine geldiğinde çıkan alt border mesafesi*/
text-decoration:none;}
.arrowunderline ul li a:hover{
border-bottom:3px solid black; /* mouse üzerine geldiğinde çıkan alt border */
}.arrowunderline ul li a:hover:after{ /* alt borderda çıkan ok */
content: ;
width:0;
height:0;
position:absolute;
left:47%;
margin-left:-5px;
bottom: 0;
border-width:8px;
border-style:solid;
border-color: transparent transparent black transparent;
}</style>
<div class="arrowunderline">
<ul >
<li><a href="http://www.alpsonmez.com">ANASAYFA</a></li>
<li><a href="http://www.alpsonmez.com">CSS NEDİR</a></li>
<li class="selected"><a href="http://www.alpsonmez.com">CSS MENU</a></li>
<li class="selected"><a href="http://www.alpsonmez.com">ÖRNEKLER</a></li>
</ul></div>