Menu horizontal con borde superior

Este es un menú horizontal con un toque juvenil el cual tiene un borde superior y las pestañas cambian de color al pasar el mouse.
Puedes verlo funcionando en este blog de pruebas.




Para poner este menú en tu blog, entra a Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

/* Menú horizontal
----------------------------------------------- */
#menulineup {
padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Color de la línea superior*/
background: transparent;
}

#menulineup ul{
margin:0;
margin-left: 40px; /*Margen izquierdo entre la primera pestaña y el borde*/
padding: 0;
list-style: none;
}

#menulineup li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#menulineup a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margen entre cada pestaña*/
padding: 5px 10px 5px 10px;
background-color: lightblue; /*Color de las pestañas*/
border-bottom: 8px solid white;
}

#menulineup a:hover{
background-color: #D10000; /*Color de las pestañas al pasar el cursor*/
padding-top: 10px;
padding-bottom: 0;
border-bottom-color: #D10000; /*Color del borde inferior al pasar el cursor*/
color: white;
}

Ahora entra a Diseño > Elementos de la página > Añadir un gadget, selecciona HTML/Javascript y ahí pega esto:

<div id="menulineup">
<ul>
<li><a href="URL del enlace">Título 1</a></li>
<li><a href="URL del enlace">Título 2</a></li>
<li><a href="URL del enlace">Título 3</a></li>
<li><a href="URL del enlace">Título 4</a></li>
<li><a href="URL del enlace">Título 5</a></li>
</ul></div>