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””