Yazılım Örnekleri

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>