En vez de que un link de un menu se subraye, aparece abajo de el una flecha que apunta hacia el link.
CSS:
Código:
<style type="text/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:3px solid purple; /* style of arrow underline */ } ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */ 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 purple transparent; /* create up arrow */ } </style>
Las cookies son pequeños fragmentos de información de texto que nosotros o nuestros socios, almacenamos sobre usted de forma local por medio de su navegador.
Puede evitar el uso de cookies en cualquier momento a través de la configuración de su navegador.
Usamos las siguientes cookies que cumplen con el GDPR:
- Cookies esenciales: son absolutamente necesarias para que el sitio web sea completamente funcional.
- Cookies opcionales: son opcionales y nos ayudan a mejorar el sitio web, por ej. analizando el comportamiento de uso del sitio web sin identificarle personalmente.
Puede encontrar más información en nuestra sección de protección de datos/privacidad.
