pro-Gramas tu biblioteca de programacion

Que tal amigos de pro-gramas en esta ocasión realizaremos distintos tipos de menús  horizontal con listas, le daremos el estilo con css. Son bastante simples los ejemplos.

En el primer caso, primero creamos un div y dentro de el colocamos la lista con los ítems que quieras, después creamos nuestra hoja de estilo, en ella le damos los colores, cuando este seleccionada, cuando el Mouse este encima y el que esta activo. Para que el menú este en forma horizontal es necesario que los ítems los flotemos a la izquierda.

El segundo es aun más simple ya que solo colocamos el menú en forma horizontal y le asignamos los colores que queramos.

El tercer menú es casi igual que el segundo solo que en el lado izquierdo de cada item tiene un borde que indica que esta seleccionado.

El HTML del ejemplo:

<!-- inicio menu No 1 -->
<div id="menu">
    <ul id="menuList">
        <li id="active"> <a href="www.pro-gramas.com"> pro-Gramas.cOm </a> </li>
        <li><a href="www.flex2mx.com">flex2mx.com</a></li>
        <li><a href="www.xenciclopedia.com">xenciclopedia.com</a></li>
    </ul>
</div>
<!-- fin menu No 1 -->
<p>&nbsp;</p>
<!-- inicio menu No 2 -->
<ul id="uno">
    <li><a href="www.pro-gramas.com">pro-Gramas.cOm</a></li>
    <li><a href="www.flex2mx.com">flex2mx.com</a></li>
    <li><a href="www.xenciclopedia.com">xenciclopedia.com</a></li>
</ul>
<!-- fin menu No 2 -->
<p>&nbsp;</p>
<!-- inicio menu No 3 -->
<ul id="dos">
    <li class="activ"> <a href="www.pro-gramas.com"> pro-Gramas.cOm </a> </li>
    <li><a href="www.flex2mx.com">flex2mx.com</a></li>
    <li><a href="www.xenciclopedia.com">xenciclopedia.com</a></li>
</ul>
<!-- fin menu No 3 -->

La hoja de estilo para los menús:
/***** inicio del estilo del menu No 1 *****/
#menu {
    margin:0px 0px 0px 0px;
    padding:0px;
    border-bottom:4px solid #000;
}  
#menuList {
    list-style-type: none;
    padding:0px 0px 30px 30px;
    margin: 0px;
}
#menuList li {
    float: left;
    height: 24px;
    margin: 0px 1px 0 1px;
}
#menuList a {
    float: lef;
    display: block;
    text-decoration: none;
    padding: 5px 15px 5px 15px;
}
#menuList a:link,
#menuList a:visited {
    background-color:#CCC;
    color: #333;
}
#menuList a:hover {
    background: #333; color:#FFF;
}
#menuList li#active a:link,
#menuList li#active a:visited {
    background-color: #000;
    color:#FFF;
}
#menuList li#active a:hover {
    background-color:#A90000;
    color: #FFF;
}
/***** fin del estilo del menu No 1 ******/
/***** inicio del estilo del menu No 2 ******/
ul#uno { 
    list-style:none;
    margin:0;
    padding:0;
}
ul#uno li {
    margin:2px;
    padding:0;
    float:left;
}
ul#uno li a {
    display:block;
    width:100px;
    padding:4px 0;
    text-decoration:none;
    text-align:center;
    font-size:11px;
    color:#FFFFFF;
    background-color:#000000;
}
ul#uno li a:hover {
    color:#99CC00;
    background-color:#003366;
}
/***** fin del estilo del menu No 2 ******/
/***** inicio del estilo del menu No 3 ******/
ul#dos { 
    list-style:none;
    margin:0;
    padding:0;
}
ul#dos li {
    margin:2px;
    padding:0;
    float:left;
}
ul#dos li a {
    display:block;
    width:100px;
    padding:4px 0;
    text-decoration:none;
    text-align:center;
    font-size:11px;
    color:#FFFFFF;
    background-color:#000000;
    border-left:10px solid #666666;
}
ul#dos li a:hover {
    color:#99CC00;
    background-color:#003366;
    border-left-color:#99CC00;
}
ul#dos li.activ a {
    color:#99CC00;
    background-color:#003366;
    border-left-color:#99CC00;
}
/***** fin del estilo del menu No 3 ******/

Descarga el ejemplo funcionando.