Menú Horizontal

Varias personas me han preguntado como hice el menú que tengo en mi blog; pues he decidido compartírselos.
Simplemente navegando en internet encontré un código de una especie de Menú horizontal para las webs, código que modifiqué un poquito para que se adecuara lo mejor posible ami blog.
No recuerdo cual fue la página exactamente pero les entrego mi código y algunas otras alternativas para generar este tipo de "aplicación"...

Existen variadas web que te ayudan a generar Menús verticales u Horizontales, las que yo probé fueron las siguientes (en Google seguramente hay muuuchas más):

• http://www.cssmenumaker.com/
• http://www.cssplay.co.uk/menus/pro_horizontal.html
• http://www.izzymenu.com/

Ahora mi código del menú que uso en mi blog es el siguiente:


<style>#MainMenu
{
height:27px;
background: #FFFFFF;
margin:0;
border-style: solid;
border-color:#9AB6D2;
border-top-width:0;
border-right-width:0;
border-bottom-width:3px;
border-left-width:0;
}

#tab
{
margin:0;
top:0;
}

#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}

#tab li
{
display:inline;
float:left;
margin:0 1px 0 0 ;
padding:0;
}

#tab a
{
background: url("http://img222.imageshack.us/img222/461/bright115ow7.gif") no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0;
display:block;
float:left;
}

#tab a span
{
display:block;
background:url("http://img233.imageshack.us/img233/1986/bleft115rc5.gif") no-repeat left top;
padding:0 22px 0 22px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
font-weight:bold;
line-height:27px;
}

#tab a:hover,#tab li.item_active a
{
background-position:right bottom;
border-color:;
}

#tab a:hover span,#tab li.item_active a span
{
background-position:left bottom;
color:#016599;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border-style: solid;
border-color:#9AB6D2;
border-top-width:0;
border-right-width:0;
border-bottom-width:3px;
border-left-width:0;
background: #FFFFFF;
color:#FFFFFF;
z-index:100;
text-decoration:none;
padding:0;
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
margin:0 1px 0 0 ;
padding:0;
display:block;
border:0 solid ;
color:#FFFFFF;
background:url("http://img233.imageshack.us/img233/1986/bleft115rc5.gif") no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:27px;
background:url("http://img222.imageshack.us/img222/461/bright115ow7.gif") no-repeat right top;
padding:0 22px 0 22px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0 solid ;
background-position:left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#016599;
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#016599;
font-weight:bold;
}
</style>
<div id="MainMenu">
<div id="tab">
<ul>
<li
class="item_active"><a href="http://leslievaldebenito.blogspot.com/"><span>Inicio</span></a></li>

<li><a href="http://leslievaldebenito.blogspot.com/search/label/My%20Life"><span>My Life</span></a></li>

<li><a href="http://leslievaldebenito.blogspot.com/search/label/Apuntes%20Linux"><span>Linux</span></a></li>

<li><a href="http://leslievaldebenito.blogspot.com/search/label/win"><span>Window</span></a></li>

<li><a href="http://leslievaldebenito.blogspot.com/search/label/Apuntes%20Blog"><span>Blog/Web</span></a></li>

<li><a href="http://leslievaldebenito.blogspot.com/search/label/peliculas"><span>Películas</span>

</a></li>

<li><a href="http://leslievaldebenito.blogspot.com/search/label/noticias"><span>Noticias</span></a></li>

<li><a href="http://leslievaldebenito.blogspot.com/search/label/Otros"><span>Otros</span></a></li>

</ul>
</div>
</div>


Si tienes blogger, puedes agregar este código en personalizar >> agregar un elemento de página >> HTML/Javascript y situarlo en el sector que tu desees.
Ahora la clasificación para cada "Grupo" del menú la hice por medio de las mismas etiquetas que uno agrega al publicar una entrada. Estas etiquetas generan una url donde encontrarás todas las entradas que hayas puesto con esa etiqueta, entonces lo que hice fue crear etiquetas claves que son las que siempre tendré en mis entradas; por ejemplo, lo que tengo en la sección "my life" todas esas entradas tienen una etiqueta "my life", lo mismo con las noticias y el resto de secciones...
la Url que generan dichas etiquetas son las que están con rojo en el código de arriba.

Se entiende?...
cualquier duda preguntan =P
es medio dificil de explicar pero simple de ejecutar =P
Donde agrupé por etiquetas

|

• 
• 
• 
• 
• 
•