Selecciona tu idioma / Select your language:

• English
• Español

Outlinr ← click&drag

How to install a bookmarklet / Cómo instalar un bookmarklet

La implementación de columnas múltiples en CSS no es algo nuevo, fue propuesto a la W3C en el 2001 y ya estaba implementado en Webkit desde sus inicios, en Firefox desde la versión 1.5 y se podía utilizar fácilmente desde 2006. Pero con el advenimiento de CSS3 como un estándar cada vez más fuerte, y con una presión bastante notoria por parte de los desarrolladores para implementar sus beneficios en sus proyectos web se ha hecho cada vez más viable su uso. Además, existen fallbacks que permiten que se pueda utilizar en navegadores más antiguos o que no tengan esta capacidad sin mayores problemas.

Por suerte su implementación es bastante simple. Dado el siguiente HTML con un bloque de texto:

<div id="columna">
   <p>International Bitterness Units (IBU), Caramel malt, Pitching Bottom-fermenting Yeast. Double bock/dopplebock; Reboboam Mash Tart Lagering Grist Caramel malt Bittering Hops...</p>
</div>

Para separarlo en 2 columnas basta con utilizar la propiedad column-count: 2;

#columna {
   -webkit-column-count: 2;
   -moz-column-count: 2;
   column-count: 2;
}

Ver Ejemplo 1

La lista completa de propiedades:

column-count:

la cantidad de columnas.

column-width:

define el ancho de las columnas, caso no quieras que el browser calcule de acuerdo al modelo de caja.

column-gap:

el espacio entre cada columna, en la unidad de medida que estimes.

column-rule:

borde (separación) entre cada colina, por ejemplo una línea recta.

Ver Ejemplo 2

Ahora, qué hacemos con los browsers que no tienen la capacidad de interpretar esta úil propiedad? Según caniuse.com, ningún IE lo soporta en la actualidad, quizás IE10 lo haga. Afortunadamente JavaScript viene al rescate con un pequeño script que incluiremos luego del estilo, el que agregará el soporte de column-count y demases.

Ver Ejemplo 3

Como ven, no hay razón para no comenzar a utilizar las columnas múltiples.

Links:

• JavaScript implementation for CSS3 Multi Column
• Caniuse.com: Multi Column browser support
• CSS Multi-column Layout Module W3C Candidate Recommendation 12 April 2011

iPad, iPad, iPad… otro nuevo dispositivo para cautivar a los ávidos consumidores, pero que por lo menos trae interesantes nuevas tecnologías. Aparte de que crean que es un iPhone gigante, tiene varias innovaciones que permiten darle mucha rienda a la imaginación de los creadores de contenido específico para esta plataforma. Una de las que más me han interesados, corresponde a los eventos gestuales.

Este artículo abordará todos los eventos disponibles para iPad y que ocurren cuando el usuario interactúa con una página web en iOS. Aunque puedes visualizar los ejemplos con Safari 5 para escritorio o el mismo iPhone, la mejor interacción la puedes lograr desde un iPad mismo por la dimensión y calidad de su superficie táctil (o en su defecto con su simulador).

Eventos Multitouch

Puedes usar classes de eventos touch de tipo DOM en Javascript que ya están disponibles en iOS. Si quieres registrar estos eventos, el sistema envía objetos TouchEvent a aquellos elementos DOM mientras los dedos se mueven por sobre la superficie. Una secuencia multitouch comienza cuando un dedo toca por primera vez la superficie. La secuencia termina cuando el último de esos dedos se levanta de la misma superficie. Éstos eventos son similares a los usuales eventos de mouse, excepto que puedes tener toques simultáneos en la superficie en diferentes lugares de la misma. Un objeto de evento touch es utilizado para encapsular todos los toques que existen en un mismo momento en la pantalla. Cada dedo es representado por un objeto touch y las típicas propiedades que encuentras en un evento de mouse están en un evento touch, pero no el objeto mismo.

Cuatro son los principales eventos touch:

ontouchstart

ocurre cada vez que un dedo se posa sobre la pantalla.

ontouchmove

ocurre cuando un dedo que ya está en la pantalla se mueve sobre ella.

ontouchend

ocurre cada vez que un dedo sale de la pantalla.

ontouchcancel

el sistema puede cancelar los eventos en ciertas ocasiones, como por ej. cuando recibes un SMS mientras estás arrastrando un elemento.

Para registrarlos con Javascript:

element.addEventListener("touchstart", touchStart, false);
element.addEventListener("touchmove", touchMove, false);
element.addEventListener("touchend", touchEnd, false);
element.addEventListener("touchcancel", touchCancel, false);

Y si lo quieres implementar como una función:

function touchStart(event) {
   // tomemos las coordenadas del dedo cuando toca la pantalla
   var x = event.touches[0].pageX;
   var y = event.touches[0].pageY;
   alert('X = '+x+',Y = '+y);
}

Ver ejemplo 1

Un simple evento: arrastra un elemento cuando mueves el dedo:

function touchMove(event) {
   event.preventDefault();
   var touch = event.touches[0];
   var node = touch.target;
   node.style.position = "absolute";
   node.style.left = touch.pageX + "px";
   node.style.top = touch.pageY + "px";
}

Ver ejemplo 2

Detalle: por defecto, si arrastras un dedo sobre la pantalla es probable que la página comience a moverse (peor si ésta tiene scroll). Por suerte agregaron la función preventDefault() que hace que la página se quede quieta si lo necesitamos.

Las listas de eventos agrupan estos objetos, y contiene información para cada dedo que está tocando la pantalla. Además, contiene 2 otras listas: una que tiene información para los dedos que se originan del mismo elemento y otro que contiene sólo información para los dedos asociados al mismo evento. Estas listas están disponibles para cada evento touch, y son:

touches

una lista para cada dedo que está posado actualmente sobre la pantalla.

targetTouches

tal como touches, pero filtra sólo la información para los dedos que comienzan del mismo elemento.

changedTouches

lista la información para cada dedo involucrado en el mismo evento.

Las propiedades que contienen estas listas son:

clientX

coordenada X del toque relativa al viewport (pantalla visible).

clientY

coordenada Y del toque relativa al viewport.

screenX

coordenada X relativa a la pantalla.

screenY

coordenada Y relativa a la pantalla.

pageX

coordenada X relativa a la página completa (incluye offset del scroll).

pageY

coordenada Y relativa a la página completa.

target

elemento donde el evento touch fue originado.

indentifier

número identificados, único para cada evento touch.

Para entender mejor, veamos el siguiente caso:

1. Cuando pongo un dedo en la pantalla, las 3 listas tendrán la misma información en sus propiedades, pero changedTouches fue el que originó el evento.

2. Cuando pongo el segundo dedo, touches tendrá 2 items (uno para cada dedo); targetTouches tendrá 2 items sólo si el segundo dedo es posado en el mismo elemento del primero; changedTouches tendrá información relacionada al segundo dedo, porque fue lo que causó el evento.

3. Si pongo 2 dedos exactamente al mismo tiempo, tendré 2 items en changedTouches: uno para cada dedo.

4. Si muevo mis dedos, la única lista que cambiará es changedTouches y va a tener información relacionada a cada dedo que se vaya moviendo (al menos uno).

5. Cuando levanto un dedo, será eliminado de touches y targetTouches y aparecerá en changedTouches ya que fue el que originó el evento.

6. Si quito el último dedo se vaciarán touches y targetTouches, y changedTouches tendrá la información para ese ultimo dedo.

<div
   ongesturestart="gestureStart(event);"
   ongesturechange="gestureChange(event);"
   ongestureend="gestureEnd(event);"
>

Y mediante Javascript:

element.addEventListener("gesturestart", gestureStart, false);
element.addEventListener("gesturechange", gestureChange, false);
element.addEventListener("gestureend", gestureEnd, false);

Comencemos con un ejemplo simple:

function gestureStart(event) {
   // tomamos el angulo y tamaño del elemento
   var angle = event.rotation;
   var scale = event.scale;
   alert('angulo: '+angle+', dimension: '+scale);
}

Ver Ejemplo 3

Ahora escalamos y rotamos un elemento:

function gestureChange(event) {
   event.preventDefault(); 
   event.target.style.width = (200 * event.scale) + "px";
   event.target.style.height = (200 * event.scale) + "px";
   event.target.style.webkitTransform = 'rotate(' + event.rotation + 'deg)';
}

Ver Ejemplo 4

Creo que esto es un buen comienzo para que te interese esta plataforma, la que implementa un tipo de interacción háptica poco usual y con un gran potencial comercial.

Links:

• Safari Reference Library: Handling Events
• Safari Reference Library: Safari DOM Additions Reference
• Sitepen: Touching and Gesturing on the iPhone

Pero recientemente un cliente pidió que los tabs se pudieran navegar con el historial del browser, o sea que si vas seleccionado diferentes tabs e incluso saliendo a otras páginas, puedas volver a ellas con el botón ‘Back’ o ‘Volver’ del navegador, y volver a pasar por ellos. Esto me resultó en un problema no menor que me costó solucionar, ya que los tabs suelen reaccionar ante eventos del click del mouse (como por ejemplo para mostrar tal <div> al clickear tal enlace <a> y que a éste se le agregue una class="selected" que indique su estado de seleccionado). Y esto suelo no quedar registrado en el caché del browser para que pueda ser navegado como se pidió. Pero bueno, pude solucionarlo y aquí lo comparto por si lo necesitan; implica 2 pasos diferentes los cuales deben funcionar en conjunto:

Primero, crearemos una simple función en jQuery para que funcionen los tabs. Esta es una de las maneras más simples de crear este tipo de menúes. Para el HTML:

<div class="tabs"><!-- .tabs -->
   <ul id="menu_tabs">
      <li><a href="#item1">Item 1</a></li>
      ...
   </ul> 
   <div id="item1" class="caja"><!-- #item1 -->
      <h2>Item 1</h2>
      <p>Donec gravida posuere arcu.</p>
   </div><!-- /#item1 -->
   ...</div><!-- /.tabs -->

Le aplicamos la siguiente instrucción en jQuery:

$(function(){
   // definimos variables para el contenedor y los<div>'s de los tabs
   var tabContainers = $('.tabs > div');
   // creamos el evento click para cada uno de los items del menu de tabs
   $('div.tabs ul a').each(function() {
      $(this).click(function(){
         // guardamos el ancla (#item1 por ej.) en una variable del link clickeado
         var hash = $(this).attr('href');
         // escondemos todos los tabs
         tabContainers.hide();
         // mostramos el <div> que sea igual al ancla guardado
         $(hash).show();
         // jugamos agregando y quitando classes del menu
         $('div.tabs ul a').removeClass('selected');
         $('a[href='+hash+']').addClass('selected');
      });
   });
   // para comenzar, hacemos que el primer elemento sea el clickeado
   $('div.tabs ul a:first').click();
});

Ver demo tabs

Bien, con esto tienes tu menú de tabs funcionando de manera básica pero práctica. Ahora como notarás, al ir por los tabs y volver con el botón del navegador éstos no seguirán el mismo recorrido devuelta, aunque en la URL sí se vea que van cambiando. Para que esto ocurra, debemos comparar no el hash del enlace (<a href="#item1"> por ej.), sino comparar con la URL que va cambiando. Además se debe incluir el plugin jQuery BBQ, el que realiza el ingreso de la URL con tabs al caché del browser. Con el mismo HTML, miren la nueva función:

$(function(){
   var tabContainers = $('.tabs > div');
   // creamos un nuevo evento y lo incluimos al browser
   $(window).bind('hashchange', function () {
      // nuestra variable no la sacamos del <a> sino de la URL y dejamos el primero seleccionado
      var hash = window.location.hash || '#item1';
      // el resto es prácticamente lo mismo
      tabContainers.hide();
      $(hash).show();
      $('div.tabs ul a').removeClass('selected');
      $('a[href='+hash+']').addClass('selected');
   });
   // ejecutamos este nuevo evento 'hashchange' mediante un trigger
   $(window).trigger('hashchange');
});

Ver demo Tabs + History

En este ejemplo, incluso podemos abrir mediante la URL en el tab que queramos, por ejemplo con el siguiente link abriremos el demo en el tab 3:

Ver demo Tabs + History en el tercer tab

Your flexible fixed layout / Tu estructura fija, flexible

Selecciona tu idioma / Select your language:

• English
• Español

#container {
   width: 960px; /* normal width */
   font-size: 14px;
}
   #container.lower1024 {
      width: 740px; /* width for less than 1024px */
      font-size: 12px; /* smaller font-size */
   }
   #container.over1280 {
      width: 1200px; /* width for over 1280px */
      font-size: 16px; /* bigger font-size */
   }

#container {
   width: 960px; /* ancho normal del sitio web */
   font-size: 14px;
}
   #container.lower1024 {
      width: 740px; /* ancho para resoluciones menores que 1024px */
      font-size: 12px; /* menor tamaño de fuente */
   }
   #container.over1280 {
      width: 1200px; /* ancho para resoluciones mayores que 1280px */
      font-size: 16px; /* mayor tamaño de fuente */
   }

Bajar/Download plugin (.zip 1kb)

Bajar/Download plugin+demos (.zip 22kb)

browserSizr logo by toledopasarin

Little extension as Jorge Sousa required, now it detects just the height of the browser window within 2 values: less than 600px and over 600px.

Pequeña extensión como solicitada por Jorge Sousa, donde ahora detecta sólo el alto de la ventana dentro de 2 rangos: menor que 600px y mayor a 600px.

Ver Ejemplo Alto Ventana

Bajar/Download plugin + demo (.zip 24kb)

Una nueva manera de mostrar más información / A new way to show more info

Selecciona tu idioma / Select your language:

• Español
• English

<div id="blox"> /* un contenedor */
   <div class="blox_content" id="box_1"> /* varias cajas de contenido */
       <div class="blox_box"> /* caja que soporta el click */
          Box 1
       </div>
       Contenido desplegado cuando Box 1 es clickeado.<a href="#" class="blox_close">Cerrar Bloque</a> /* contenido oculto pero que se muestra al click en la caja anterior */
   </div>
   /* otras cajas con el mismo patron */
</div>

#blox {
   width: 400px;
   height: 400px; 
   position: relative;
}
   .blox_content {
      width: 200px;
      height: 400px; 
      position: absolute;
   }
      #box_1 {
         top: 0; 
         left: 0;
      }
      #box_2 {
         top: 0; 
         left: 200px;
      }
      /* asi con cada una de las otras cajas */
   .blox_box {
      width: 200px; 
      height: 400px; 
   }

 <script type="text/javascript">
     $(function(){
         $().blox({
             container: '#contenedor_blox',
             close: '.boton_cierra',
             direction: 'righty',
             fadein: 0.6
         });
     });
</script>

<div id="blox"> /* a container */
   <div class="blox_content" id="box_1"> /* many content blocks */
      <div class="blox_box"> /* box that fires the interaction */
         Box 1
      </div>
      Content displayed when Box 1 is clicked, above Box 2.<a href="#" class="blox_close">Close Box</a> /* hidden content displayed at .blox_box click */
   </div>
   /* other boxes with the same pattern */
</div>

#blox {
   width: 400px;
   height: 400px; 
   position: relative;
}
   .blox_content {
      width: 200px;
      height: 400px; 
      position: absolute;
    }
       #box_1 {
          top: 0; 
          left: 0;
       }
       #box_2 {
          top: 0; 
          left: 200px;
       }
      /* like this for each of other boxes */
      .blox_box {
         width: 200px; 
         height: 400px; 
      }

 <script type="text/javascript">
     $(function(){
         $().blox({
             container: '#my_boxes,
             close: '.closeboxes,
             direction: 'righty',
             fadein: 0.6
         });
     });
</script>

Baja el plugin / Get the plugin

Bajar/Download plugin (.zip 1kb)

Bajar/Download plugin+demos (.zip 220kb)

Blox logo by youfeelme.biz

<a href="javascript:function(laQueSea){};">Bookmarklet La Que Sea</a>

La idea es que sean ejecutada mediante el click del enlace, y lo que usualmente se usa es guardarlos mediante bookmarks en tu browser; así puedes tenerlos a mano siempre que los necesites.

Como están escritas en Javascript, puedes hacer modificaciones a cualquier elemento de DOM dentro de la página: cambiar tamaño de fuentes, colores, extraer datos de la página (links, imágenes, texto), enviar datos para validación o traducción entre muchas otras cosas.

Personalmente me son bastante útiles al momento de desarrollas mis proyectos web; tengo algunos de frecuente uso y quisiera compartirlos por si ayudan a más de alguno en los excelentes trabajos que seguro hacen. Para utilizarlos, lo mejor es hacer click en el enlace y arrastrarlo a tu barra de Bookmarks como se ejemplifica en la siguiente imagen:

XRay click y arrastra

Permite visualizar las propiedades DOM del elemento al seleccionarlos: selector, ID, CLASS, herencia y estilos CSS asociados.

Design click y arrastra

Permite visualizar la grilla utilizada en la construcción de la página, medidas y alineamiento entre otras cualidades.

800×600 1024×768 1280×1024 1600×1200 click y arrastra cada uno

Modifica el tamaño de la ventana de tu browser a alguna de esas medidas estándar.

MRI click y arrastra

Muestra y enmarca cualquier selector que queramos ver de una página web.

WTFramework click y arrastra

Muestra qué framework de Javascript se está utilizando en el sitio.

Microformats click y arrastra

Muestra cuáles microformatos están siendo utilizados en determinada página.

Y por último, mi favorito:

ReCSS click y arrastra

Recarga sólo las hojas de estilos llamadas desde la página, sin tener que volver a cargar todo el HTML para visualizar cambios.

Cuando uno comienza un proyecto, se suele elegir el mejor lenguaje para su desarrollo y una de las desiciones es elegir el framework JS con que se trabajará, y casarse con éste. Ahora vengo a conocer que ésta desición no tiene que ser tan drástica, ya que jQuery incluye una funcionalidad que permite que se utilice junto con otras librerías, evitando el conflicto de interpretación entre diferentes formas de escribir javascript que conforma cada framework; en esta ocasión mostraré los diferentes usos de noConflict();

Supongamos que tenemos un simple efecto de mostrar/esconder el contenido al activar un link, lo que se llama SlideToggle. El HTML sería el siguiente:

<a href="#" class="boton">Muestra/Esconde</a>
<div class="caja">
     <p>Vivamus auctor leo vel dui...</p>
</div>

En Mootools el código para hacerlo funcionar se compone de la siguiente manera:

window.addEvent('domready', function() {
     new Fx.Slide('mooMuestra').hide()
     $('mooEsconde').addEvent('click', function(e){
          e.stop();
          new Fx.Slide('mooMuestra').toggle();
     });
});

Ver ejemplo con Mootools

Ya con jQuery, lo mismo se realiza de la siguiente manera:

$().ready(function(){
     $('#jMuestra').hide();
     $('#jEsconde').click(function(){
          $('#jMuestra').slideToggle();
     });
});

Ver ejemplo con jQuery

Ahora combinaremos ambos métodos en un mismo archivo, el cual estará linkeando las librerías de Mootools 1.2.0 y jQuery 1.3.1, y se realizará SlideToggle cada una con su método. Para eso, se cambiará la manera con el cual jQuery llama a sus selectores (que es una de las principales razones de conflicto; el uso resumido con $). Primero, se linkea el framework de jQuery y luego el de Mootools. Se escriben los eventos con los cuales se realizan los SlideToggle, pero con un leve cambio en jQuery. En vez de utilizar:

$('selector').slideToggle();

se cambiará a:

jQuery.noConflict();
jQuery('selector').slideToggle();

Esto se repetirá con cada selector en que antes utilizábamos $. Finalmente reciclando el mismo código mostrado anteriormente, quedaría:

jQuery.noConflict();
jQuery().ready(function(){
     jQuery('#jMuestra').hide();
     jQuery('#jEsconde').click(function(){
          jQuery('#jMuestra').slideToggle();
     });
});

Ver ejemplo integrando jQuery+Mootools

Otra manera es creando una variable con una nueva manera de escribir $, por ejemplo, $jQ:

var $jQ = jQuery.noConflict();
$jQ().ready(function(){
     $jQ('#jMuestra').hide();
     $jQ('#jEsconde').click(function(){
          $jQ('#jMuestra').slideToggle();
     });
});

Ver ejemplo 2 integrando jQuery+Mootools

Me puse a indagar por la web y encontré varias discusiones sobre qué solución es mejor que otra, y ninguna fue conclusiva. No hay solución aparente que funcione de igual manera para todos los browsers y que sea utilizada, por ejemplo, con comentarios condicionales. Básicamente me encontré con 2: una que involucra HTML pero la mejor manera de implementarlo es mediante Javascript y la segunda sencillamente con Javascript. Explicaré ambas a continuación, pero antes el HTML común que sería del tipo:

<select>
     <option>Primero</option>
     <option disabled="disabled">Segundo</option>
     <option>Tercero</option>
</select>

Ver ejemplo (en IE notarán)

Solución 1

Para que IE interprete la opción <option disabled="disabled">Segundo</option> como deshabilitado, debes cambiar la etiqueta <option> por <optgroup>; el problema es que <optgroup> se compone ligeramente diferente de <option> por lo que el HTML quedaría así:

<select>
     <option>Primero</option>
     <optgroup label="Segundo">Segundo</optgroup>
     <option>Tercero</option>
</select>

Esta solución funciona perfecto en todos los browsers, por lo que puede ser hecho automáticamente mediante jQuery:

$('option:disabled').each(function(){
     var texto = $(this).text();
     $(this).replaceWith("<optgroup label='"+texto+"'>"+texto+"</optgroup>")
});

Como el problema es sólo de IE, prefiero encerraro en un if() que detecte el browser como podrán apreciar en el ejemplo. Además, notarán que <optgroup> tiene una leve diferencia de estilo que <option disabled="disabled"> pero que se puede subsanar fácilmente mediante CSS.

Ver solución 1 (en IE notarán)

Solución 2

Esta solución no es una solución en sí sino un parche para el problema: ya que IE no considera el atributo disabled, entonces cada vez que el <option disabled="disabled"> sea seleccionado por el usuario (tomando en cuenta que todos los otros browsers no dejarán que sea seleccionado) la selección será automáticamente trasladada al primer <option> del <select>, vale decir del ejemplo HTML si hago click a <optgroup label="Segundo">Segundo</optgroup>, automáticamente seré redireccionado a <option>Primero</option>. El JS:

$('option:disabled').css('color','gray'); 
$('select').change(function(){
     checkDisabledOptions(this);
});
function checkDisabledOptions(el){
     if(el.options[el.options.selectedIndex].disabled){
          el.selectedIndex = 0;
     }
}

Esta solución es una mezcla entre jQuery y Javascript puro, tomada de la mejor implementación encontrada de entre 20 otras vistas; es la más simple y con menos líneas de código. Además, para esta solución es bueno siempre en el primero item del <select> la opción <option>Seleccione</option> o cualquiera que sea que no tenga un value válido (value=""), así aportamos a la accesibilidad y podremos validar ese ítem de formulario.

Ver solución 2 (en IE notarán)

Espero Rodrigo te haya servido, y gracias por hacer me ver este tema; me entretuve bastante resolviéndolo.

Links:

• Support for <option disabled> is inexistent in Internet Explorer 6, 7 and 8 beta 1
• IE Bites: option disabled doesn’t work

Por suerte hacer estos tipos de menúes es bastante fácil: basta con tener claro cómo funcionan los menúes con listas e ir anidando unas dentro de otras; incluso sólo con CSS es suficiente para hacerla funcionar, pero lamentablemente el peor browser de la historia universal (IE6) no soporta pseudo-classes en selectores que no sean links (<a>). Así que lo mejor y que más soporte cross-browser nos entrega es utilizar Javascript en este proceso. Y qué mejor que utilizar jQuery ó Mootools, 2 de los frameworks con los que me gusta jugar.

En este artículo veremos el proceso para crear un menú con tabs y cómo hacerlo funcionar mediante CSS y con la ayuda de Javascript.

Como mencionaba, un menú con tabs se compone básicamente de listas anidadas sobre otras listas. El HTML sería el siguiente:

<ul id="menu">
  <li><a href="#">Uno</a></li>
  <li class="cabeza"><a href="#">Dos</a>
     <ul>
        <li><a href="#">Dos.Uno</a></li>
        <li><a href="#">Dos.Dos</a></li>
        <li><a href="#">Dos.Tres</a></li>
     </ul>
  </li>
  <li><a href="#">Tres</a></li>
  <li class="cabeza"><a href="#">Cuatro</a>
     <ul>
        <li><a href="#">Cuatro.Uno</a></li>
        <li><a href="#">Cuatro.Dos</a></li>
     </ul>
  </li>
</ul>

Ver ejemplo del HTML

Si el mundo fuera hermoso y no existiera IE6, nos bastaría con un poco de CSS y selectores avanzados de atributos para hacerlo funcionar:

ul {
  list-style: none;
}
  ul li {
    float: left;
    width: 100px;
    text-align: center;
  }
    li.cabeza>ul {
      display: none;
    }
      li.cabeza:hover>ul {
        display: block;
      }

Ver ejemplo con CSS

Para mejorar el manejo del despliegue de los subniveles, le coloqué una class="cabeza" a cada elemento de lista (<li>) que contenga cada nuevo subnivel. Ahora es más fácil diferenciarlas con CSS ó Javascript, como mostraré a continuación. Primero, con jQuery:

$(document).ready(function(){
  // primero escondemos todos los subniveles
  $('li.cabeza > ul').hide();
  // luego le agregamos el evento de mouseover y mouseout mediante hover de jQuery
  $('li.cabeza').hover(
    function() {
      $('ul', this).show();
    },
    function() {
      $('ul', this).hide();
  }); });

Ver ejemplo jQuery

Muy simple. Ahora, con Mootools (1.11):

window.addEvent('domready', function() { 
  // creamos una variable 'list' que será el selector <li> con class="cabeza", ya que la usaremos más de una vez.
  var list = $$('li.cabeza'); 
  // luego escondemos cada <ul> que esté contenido dentro de li.cabeza mediante display: none
  list.getElement('ul').setStyle('display', 'none');
  // ahora agregamos los eventos de mouseenter y mouseout respectivos
  list.each(function(el) {
    el.addEvent('mouseenter', function(){
      $(this).getElement('ul').setStyle('display', 'block');
    });
    el.addEvent('mouseleave', function(){
      $(this).getElement('ul').setStyle('display', 'none');
    });
  }); 
});

Ver ejemplo Mootools

Finalmente si usas un browser bueno, cualquier de los 3 métodos funcionará igual; viene de ti implementarlo de la mejor forma para que tus usuarios que aún usen IE6 para visitar tu sitio puedan disfrutar de una buena navegación y del contenido que ofrece.