En busca de un menú desplegable perfecto: se extiende a todo el ancho, elementos de ancho igual, CSS puro. Por favor, ayudar a resolver un problema técnico

Question

Estoy tratando de poner en práctica un menú con las siguientes características:

• horizontal;
• elementos de menú de ancho igual;
• elementos del menú repartidos por todo el ancho de la página (no solo multitud en el lado izquierdo);
• dinámico (las reglas css no deben depender del número predefinido de elementos);
• segundo nivel desplegable con elementos alineados verticalmente;
• CSS puro (no JS!).

Esto parece describir un menú perfecto tal como lo veo.

Casi he succeded por lo que es el uso de la hermosa display: table-cell; técnica (etiquetas se omiten por simplicidad):

<ul> 
    <li>Menu item</li> 
    <li> 
     Expandable ↓ 
     <ul> 
      <li>Menu</li> 
      <li>Menu item</li> 
      <li>Menu item long</li> 
     </ul> 
    </li> 
    <li>Menu item</li> 
    <li>Menu item</li> 
</ul> 

ul { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

li { 
    display: table-cell; 
    text-align: center;  
} 

li:nth-child(even){ 
    background-color: lightblue;  
} 

li:nth-child(odd){ 
    background-color: lightskyblue;  
} 

li ul { display: none; } 

li:hover ul { 
    display: block; 
    position: absolute; 
} 

li:hover ul li { 
    display: block; 
} 

El único problema es que los elementos de submenú aparecen ancho de página completa y parcialmente fuera del navegador ventana, forzando que aparezca una barra de desplazamiento horizontal:

Gah! StackOverflow no me deja publicar imágenes. Pruébelo en vivo en JSFiddle: http://jsfiddle.net/6PTpd/9/

Puedo solucionar esto agregando float: left; clear: both; a li:hover ul li. Pero cuando lo haga, elementos de submenú tienen diferentes anchuras:

violín: http://jsfiddle.net/6PTpd/10/

... o anchura width: 15%;: http://jsfiddle.net/6PTpd/12/

Ambas correcciones son feas y se resuelven ni la cuestión anchura igual ni la emisión barra de desplazamiento horizontal .

UPD Mientras se cepilla hasta este post me he encontrado alguna solución del problema barra de desplazamiento: ajusta el ancho li:hover ul a 0. Pero esto obliga a spectify la anchura de los elementos de submenú en un valor absoluto. :(Ver http://jsfiddle.net/6PTpd/13/

Además, esta solución puede chupar cuando se expande el último elemento del menú Dependiendo del ancho de la pantalla, todavía puede soplar la página más ancha que la ventana:. http://jsfiddle.net/6PTpd/15/

Preguntas:

1. ¿Cómo hago elementos de submenú aparecen mismos anchos como sus padres y sin permitir la barra de desplazamiento horizontal?
2. ¿existe otra técnica CSS que permite crear un menú con todos los requisito s descrito en el comienzo de la publicación?

He encontrado muchos ejemplos, pero ninguno de ellos es extensible (flota elementos a la izquierda) o no dinámico (usa tamaños tomados de un número predefinido de elementos, p. Ej.width: 20% para cada uno de los cinco elementos de primer nivel o, peor aún, utiliza tamaños absolutos!).

Answer 1

Ésta no es la mejor manera de hacer esto, pero aquí está la solución: http://jsfiddle.net/6PTpd/17/

Lo más gracioso de CSS es que incluso los maestros siempre están descubriendo nuevas cosas que se pueden hacer con ella. Es un lenguaje increíble de esa manera. Por eso te di ese violín, para que pudieras aprender lo que estabas haciendo mal (fue principalmente el posicionamiento absoluto, por cierto). PERO también hay algunas lagunas que debes tener en cuenta.

Así que permítanme explicar por qué es probable que no debe utilizar el código en ese jsFiddle. El primer problema es que usa display: none. Eso es un problema porque los lectores de pantalla no leen el texto que no se muestra. (Más sobre esto aquí: http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/)

El segundo problema es que muestra en vuelo estacionario. En un mundo donde las pantallas táctiles son cada vez más frecuentes, el vuelo estacionario ya no es la mejor opción.

Todavía se puede utilizar si lo desea, sólo pensé que usted debe saber acerca de los inconvenientes.

TL; DR: Si lector de pantalla y soporte de pantalla táctil es un problema, entonces le animo a buscar otra opción.

Answer 2

Hay muchas maneras de hacer un menú perfecto, ya sea usando códigos HTML y CSS, especialmente si está usando HTML5 & CSS3, y puede encontrar muchos ejemplos buscando en internet. La segunda manera fácil es mediante el uso de programas que harán que la codificación sea más fácil para usted, como Sothink DHTML Menu, o http://css3menu.com