Pure CSS Menu

by Annett

HTML

<ul class="arrowunderline">
<li><a href="#">Home</a></li>
<li><a href="#">New</a></li>
<li class="selected"><a href="#">Revised</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">CSS</a></li>    
<li><a href="#">Forums</a></li>    
</ul>

CSS

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:black;
padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;

}

ul.arrowunderline li a:hover{
border-bottom:1px solid purple; /* style of arrow underline */
}

ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'^';
background:res;
    padding:5px;
}