@font-face {
  font-family: "OpenSans-Regular";
  src: url(font/OpenSans-Regular.ttf) format("truetype");
}/* CSS Document */

<style>

ul.arrowunderline{
font-family:OpenSans-Regular;
font-size:14px;
list-style-type:none;
margin:0;
padding:0;
text-align:center;
 /* enter "left", "right", or "center" to orient the menu accordingly */
}

ul.arrowunderline li{
font-family:OpenSans-Regular;
font-size:14px;
display:inline;
margin-right:25px; /* spacing between each menu item */
}

ul.arrowunderline li a{
font-family:OpenSans-Regular;
font-size:14px;
position:relative;
color:#333333;
padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;

}

ul.arrowunderline li a:hover{
font-family:OpenSans-Regular;
font-size:14px;
border-bottom:3px solid #851619; /* style of arrow underline */
color:#000;
}

ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
font-family:OpenSans-Regular;
font-size:14px;
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 #851619 transparent; /* create up arrow */
}

</style>