Debido al pedido del público fiel lector de CSSLab, me puse las pilas y anoto un artículo más con una vieja pero nunca mal ponderada técnica para construir menús de listas horizontal (usando

    y
  • ), pero en esta oportunidad le agregaremos un rollover, ya q he recibido la inquietud de parte de Bane de cómo aplicar el artículo anterior ‘Rápidos rollovers con CSS‘ en este tipo de despliegue. Vayamos al grano:

    Lo primero es lo primero: creamos el menú con 1

    , 1
      y varios
    • ‘s:

      <div id="menu">
   <ul>
      <li><a href="#">Más Izquierda</a></li>
      <li><a href="#">Izquierda</a></li>
      <li><a href="#">Derecha</a></li>
      <li><a href="#">Más derecha</a></li>
   </ul>
</div>

      Le vamos a dar color y forma a esto. Agregando estilo a #menu:

      #menu ul {
   padding: 0px;
   margin: 0px;
   background-color: #333;
   list-style: none;
   font-size: 14px;
   font-weight: bold;
   width: 100%;
   height: 30px;
   float: left;
}

      y el punto clave: horizontalizando a través de display: inline;

      #menu ul li {
   display: inline;
}

      Hasta aquí, nada fuera de lo común. Nos falta agregar algo bonito para que se vea bien en un rollover, algo simple. Un cambio de color:

      #menu ul li a:link, #menu ul li a:visited {
   background-color: #333;
   color: #FFF;
   padding: 5px 15px;
   float: left;
   text-decoration: none;
}<br />
   #menu ul li a:hover, #menu ul li a:active{
      color: #F30;
      background-color: #CCC;
      height: 20px;
   }

      [Ver resultado parcial.][1]{.verejemplo}

      Nuestro menú básico horizontal está hecho y funciona de maravilla. Ahora agreguémosle un rollover con imagen de fondo (background-image en vez de background-color) y que las instancias estén en un mismo gif:

      CSSLab - link

      Solamente reemplazaremos donde antes habíamos seteado los parámetros relacionados con el fondo (background-image):

      #menu ul {
   padding: 0;
   margin: 0;
   background-image: url("fondo_menu.gif");
   background-repeat: repeat;
   background-position: 0 0;
   background-color: #333;
   list-style: none;
   font-size: 14px;
   font-weight: bold;
   width: 100%;
   height: 30px;
   float: left;
}<br />
   #menu ul li a:link, #menu ul li a:visited {
      background-image: url("fondo_menu.gif");
      background-repeat: repeat;
      background-position: 0 0;
      color: #fff;
      padding: 5px 15px;
      float: left;
      text-decoration: none;
   }<br />
   #menu ul li a:hover, #menu ul li a:active{
      color: #900;
      background-position: 0 -30px;
      background-color: #ccc;
      height: 20px;
   }

      [Ver resultado final.][2]{.verejemplo}

      Una aclaración: en vez de resumir el background colocando aquí todos los parámetros (url, posición, repetición), preferí hacerlo cada uno en su respectivo atributo. Con esto, Safari lo puede leer fluído y no deja errores al desplegar el fondo. Además no me gusta resumir mucho. Otra aclaración: a diferencia del otro tutorial donde se explica lo mismo pero en un menú vertical, aquí el cambio de posición para mostrar la posición del fondo_menu.gif es de manera vertical, no horizontal: background-position: 0 -30px; donde fije el alto de la botonera en 30 pixeles para un despliegue exacto de las instancias de los botones.

      Disculpa Bane por el retraso en la respuesta a tu inquietud. Espero ahora te resulte.

      [1]: http://www.csslab.cl/ejemplos/menu_list.html “Enlace en CSSLab.cl a “Resultado parcial de Menú Horizontal”” [2]: http://www.csslab.cl/ejemplos/menu_hover.html “Enlace en CSSLab.cl a “Resultado final de Menú Horizontal””