Menú muy sencillo efecto hover con flecha

No digo que sea una novedad ni espectacular pero es un menú muy sencillo, tan sencillo que lo vamos a añadir todo en un gadget de HTML y ahí ya tenemos marcadas las partes que podemos cambiar.

Para los enlaces hacemos como siempre, sustituimos "url-enlace" por la url de nuestro enlace y en "Enlace 1-2-3-4-5-6" por nuestro texto que hará de enlace.

<style>

ul.arrowunderline{

list-style-type:none;

margin:0;

padding:0;

text-align:center; /*  puede ser "left", "right" o "center"  */

font: bold 18px Georgia; /* tamaño de fuente */

}

ul.arrowunderline li{

display:inline;

margin-right:25px; /* espacio entre enlaces */

}

ul.arrowunderline li a{ /* el color de texto es black */

position:relative;

color:black;

padding-bottom:8px; /* espacio entre la flecha y el texto */

text-decoration:none;

}

ul.arrowunderline li a:hover{

border-bottom:3px solid red; /* grosor línea de la flecha el color es red */

}

ul.arrowunderline li a:hover:after{

content:'';

width:0;

height:0;

position:absolute;

left:50%;

margin-left:-5px;

bottom: 0;

border-width:5px;

border-style:solid;

border-color: transparent transparent red transparent; /* el color de la flecha es red */

}

</style>

<ul class="arrowunderline">

<li><a href="url-enlace">Enlace 1</a></li>

<li><a href="url-enlace">Enlace 2</a></li>

<li class="selected"><a href="url-enlace">Enlace 3</a></li>

<li><a href="url-enlace">Enlace 4</a></li>

<li><a href="url-enlace">Enlace 5</a></li>

<li><a href="url-enlace">Enlace 6</a></li>

</ul>