Menu horizontal 'San Valentin'

Con motivo de estas fechas enamoradizas de San Valentin, os presento este idilico menu para vuestro blog o web. Como podeis obsevar, cada enlace lleva su corazoncito correspondiente. Ademas, cuenta con animacion, al situar el cursor sobre un enlace aparece una flechita que atraviesa el corazon, como si de Cupido se tratase. Esta realizado integramente con CSS3, utilizando tambien una pequeña imagen 'sprite'. Si te gusta y quieres ponerlo en tu pagina, copia el codigo de abajo y añadelo donde quieras mostrarlo. Escribe tus direcciones urls y los nombres de los enlaces donde esta indicado en color naranja. Si quieres poner mas enlaces, añade la linea <a href="URL">NOMBRE ENLACE</a> mas veces, por el contrario si quieres poner menos, elimina lineas.

EnlaceEnlaceEnlaceEnlace

ver codigo del menu

<div class="menucorazon cor"><a href="URL">NOMBRE ENLACE</a><a href="URL">NOMBRE ENLACE</a><a href="URL">NOMBRE ENLACE</a>
<a href="URL">NOMBRE ENLACE</a><div class="efecto"></div></div>

<link href='http://fonts.googleapis.com/css?family=Unica+One' rel='stylesheet' type='text/css'>  <style>
.cor {
  text-align: center;
  overflow: hidden;
  margin: 1em auto;
  width:;
  position: relative; }
  .cor a {
    display: block;font-family: "Unica One";font-size:25px;
    position: relative;
  float: left;
  padding: 1em 0 2em;
    width: 25%;
  text-decoration: none;
   color: #393939 !important;
   -webkit-transition: .7s;
   -moz-transition: .7s;
   -o-transition: .7s;
   -ms-transition: .7s;
   transition: .7s; }
   .nav a:hover {
     color: #c6342e; }
.efecto {
 position: absolute;
  left: -12.5%;
  -webkit-transition: 0.7s ease-in-out;
  -moz-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  -ms-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out; }

 .cor a:nth-child(1):hover ~ .efecto {
   left: 12.5%; }
 .cor a:nth-child(2):hover ~ .efecto {
   left: 37.5%; }
 .cor a:nth-child(3):hover ~ .efecto {
   left: 62.5%; }
 .cor a:nth-child(4):hover ~ .efecto {
   left: 87.5%; }
.menucorazon .efecto, .menucorazon a:after, .menucorazon a:before {
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP-heFpoFDkwf7bt2WurONK05xfSkqZ582pY4A47s_5bUesTVBSe7FrmF9uasvNW9Sq7GO1u22WHAYCUL3xp0dQYeCNekKCs1RIn5R21_EVuNp_EQ7wbjXOpLvFGFrBvof-sWRQMl2xW4/s84/heart.png') no-repeat; }
.menucorazon .efecto {
  position: absolute;
  bottom: 26px;
  background-position: 0 0;
  height: 8px;
  width: 62px;
  margin-left:-31px;

 }

.menucorazon a:hover {color:#C6342E !important;}

.menucorazon a:before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 20px;
  background-position: -62px 0;
  height: 20px;
  width: 11px;
  margin-left: -11px; }

.menucorazon a:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 1;
  background-position: -73px 0;
  height: 20px;
  width: 11px; }
</style>