√ Menú Horizontal solo con CSS para blogger

Normalmente todos los Blog usamos un menú de navegación en la parte superior del blog que ayuda a los lectores a navegar y organizar facilmente nuestros enlaces.

Hoy os traigo un nuevo menú que solo trabaja en Css y con ello evitamos no incorporar script de ningún tipo, aligerando así el tiempo de carga del blog.

Tan solo tiene una cierta limitación, que no es desplegable, siendo bueno para blogs pequeños con pocos enlaces.

Añadirlo a Blogger:
1.-Ir al Escritorio de Blogger> Diseño
2.-Haga clic en Agregar un gadget (por debajo de Cabecera)
3.-Pegar código y guárdelo.

<style type="text/css">
div.topbar {
height: 16px;
background: #AE0707;
}
ul.amor {
font-weight: bold;
width: 100%;
background: #FFF;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
font-family: calibri;
border: 1px solid #9B0404;
}

ul.amor li {
display: inline;
}

ul.amor li a {
color: black;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}

ul.amor li a:hover, ul.amor li a.selected {
color: white;
background: #CB0404;
background: -moz-linear-gradient(top, #5d4137 0%, #CB0404 12%, #840404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #840404;
-webkit-box-shadow: 0 0 5px #840404;
box-shadow: 0 0 5px #840404;
padding-top: 17px;
padding-bottom: 6px;
}
</style>
<div class="topbar">
</div>
<ul class="amor">
<li><a href="http://www.amorsevillista.com">INICIO</a></li>
<li><a href="Url del link">Link 1</a></li>
<li><a href="Url del link">Link 2</a></li>
<li><a href="Url del link">Link 3</a></li>
<li><a href="Url del link">Link 4</a></li>
<li><a href="Url del link">Link 5</a></li>
</ul>

!!!!! A DISFRUTARLO !!!!!!!