Menus horizontales sencillos creados con CSS efecto hover

Se trata de 3 menús horizontales muy sencillos creados con puro CSS utilizando los bordes.
Que los disfrutes!

<ul id="menuhorizontal1"> 
<li><a href="#">Enlace 1</a></li> 
<li><a href="#">Enlace 2</a></li> 
<li><a href="#">Enlace 3</a></li> 
<li><a href="#">Enlace 4</a></li> 
<li><a href="#">Enlace 5</a></li> 
<li><a href="#">Enlace 6</a></li> 
<li><a href="#">Enlace 7</a></li> 
<li><a href="#">Enlace 8</a></li> 
</ul>

#menuhorizontal1 li { 
display: inline; /* Enlaces alineados */
} 
#menuhorizontal1 li a { 
font-family: Arial; /* Tipo de letra */
font-size:11px; /* Tamaño de letra mostrado */
text-decoration: none; /* Enlaces no subrayados */
float:left; /* Alineación de todo el menú */
padding: 10px; /* Menú expandido */
background-color: #006600; /* Color de fondo mostrado */
border-left: 10px solid #009900; /* Tipo, color y tamaño de borde izquierdo mostrado */
border-top: 4px solid #009900; /* Tipo, color y tamaño de borde arriba mostrado */
border-right: 4px solid #009900; /* Tipo, color y tamaño de borde derecho mostrado */
border-bottom: 10px solid #009900; /* Tipo, color y tamaño de borde abajo mostrado */
color: #FFFFFF; /* Color de letra */
} 
#menuhorizontal1 li a:hover { 
background-color: #009900; /* Color de fondo hover */
border-left: 7px inset #006600; /* Tipo, color y tamaño de borde izquierdo hover */
border-top: 20px inset #006600; /* Tipo, color y tamaño de borde arriba hover */
border-right: 7px inset #006600; /* Tipo, color y tamaño de borde derecho hovero */
border-bottom: 20px inset #006600; /* Tipo, color y tamaño de borde abajo hover */
font-size:13px; /* Tamaño de letra hover */
}

<ul id="menuhorizontal2"> 
<li><a href="#">Enlace 1</a></li> 
<li><a href="#">Enlace 2</a></li> 
<li><a href="#">Enlace 3</a></li> 
<li><a href="#">Enlace 4</a></li> 
<li><a href="#">Enlace 5</a></li> 
<li><a href="#">Enlace 6</a></li> 
<li><a href="#">Enlace 7</a></li> 
<li><a href="#">Enlace 8</a></li> 
</ul>

#menuhorizontal2 li { 
display: inline; 
} 
#menuhorizontal2 li a { 
font-family: Arial; 
font-size:11px; 
text-decoration: none; 
float:left; 
padding: 10px; 
background-color: #0000FF; 
border: 10px solid #007FFF;
color: #FFFFFF; 
} 
#menuhorizontal2 li a:hover { 
background-color: #007FFF;
border: 10px inset #007FFF;
font-size:13px; 
}

<ul id="menuhorizontal3"> 
<li><a href="#">Enlace 1</a></li> 
<li><a href="#">Enlace 2</a></li> 
<li><a href="#">Enlace 3</a></li> 
<li><a href="#">Enlace 4</a></li> 
<li><a href="#">Enlace 5</a></li> 
<li><a href="#">Enlace 6</a></li> 
<li><a href="#">Enlace 7</a></li> 
<li><a href="#">Enlace 8</a></li> 
</ul>

#menuhorizontal3 li { 
display: inline; 
} 
#menuhorizontal3 li a { 
font-family: Arial; 
font-size:11px; 
text-decoration: none; 
float:left; 
padding: 15px; 
background-color: #FF4000; 
border-top: 8px inset #FF8000;
color: #FFFFFF; 
} 
#menuhorizontal3 li a:hover { 
background-color: #FF8000;
border: 4px inset #FF8000;
border-top: 15px double #FF4000; 
border-bottom: 4px solid #FF4000;
font-size:13px; 
}