Alla ricerca di un menu a discesa perfetto: allungamento a larghezza intera, elementi di larghezza uguale, puro CSS. Si prega di aiutare risolvere un problema tecnico

Question

Sto cercando di implementare un menù con le seguenti caratteristiche:

• orizzontale;
• voci di menu di larghezza uguale;
• voci di menu distribuite su tutta la larghezza della pagina (non solo la folla sul lato sinistro);
• dinamico (le regole CSS non devono basarsi su un numero predefinito di elementi);
• secondo livello a discesa con elementi allineati verticalmente;
• puro CSS (no JS!).

Questo sembra descrivere un menu perfetto come lo vedo io.

ho quasi succeded rendendo utilizzando la bella display: table-cell; tecnica (tag sono omessi per semplicità):

<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; 
} 

L'unico problema è che le voci di sottomenu appaiono larghezza piena pagina e in parte al di fuori del browser finestra, forzando la visualizzazione di una barra di scorrimento orizzontale:

Gah! StackOverflow non mi consente di pubblicare immagini. Provalo in diretta su JSFiddle: http://jsfiddle.net/6PTpd/9/

Posso superare questo aggiungendo float: left; clear: both; a li:hover ul li. Ma quando lo faccio, voci del sottomenu hanno diverse larghezze:

Fiddle: http://jsfiddle.net/6PTpd/10/

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

Entrambe le correzioni sono brutti e risolvere né la questione larghezza pari né il problema barra di scorrimento orizzontale .

UPD Mentre spazzolatura questo post che ho trovato un po 'di soluzione del problema barra di scorrimento: impostato li:hover ul larghezza a 0. Ma questo le forze per spectify la larghezza delle voci del sottomenu in un valore assoluto. :(Vedi http://jsfiddle.net/6PTpd/13/

Inoltre, questa soluzione può succhiare duro quando l'ultima voce di menu viene espanso A seconda della larghezza dello schermo, può ancora soffiare pagina più larga della finestra:. http://jsfiddle.net/6PTpd/15/

Domande:

1. Come faccio voci del sottomenu appaiono stessa larghezza come impresa madre e senza attivare la barra di scorrimento orizzontale?
2. c'è un'altra tecnica CSS che permette di creare un menu con tutti i prerequisiti s descritto all'inizio del post?

Ho trovato molti esempi, ma ognuno di essi è non-stretching (fa fluttuare gli elementi a sinistra) o non dinamico (usa le dimensioni prese da un numero predefinito di elementi, per esempio.width: 20% per ognuno dei cinque articoli di primo livello o, peggio ancora, usa le dimensioni assolute!).

Answer 1

Questo non è il modo migliore per farlo, ma, ecco la soluzione: http://jsfiddle.net/6PTpd/17/

La cosa divertente di CSS è che anche i padroni sono sempre scoprendo nuove cose che si possono fare con esso. È un linguaggio fantastico in questo modo. È per questo che ti ho dato quel violino, in modo che tu potessi imparare quello che stavi facendo male (era principalmente il posizionamento assoluto, BTW). MA ci sono anche alcune lacune di cui dovresti essere a conoscenza.

Quindi mi spiego perché probabilmente non dovresti usare il codice in quel JSFiddle. Il primo problema è che utilizza display: none. Questo è un problema perché gli screen reader non leggono il testo che non viene visualizzato. (altro su questo qui: http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/)

Il secondo problema è che viene visualizzato al passaggio del mouse. In un mondo in cui i touch screen stanno diventando sempre più diffusi, il passaggio del mouse non è più l'opzione migliore.

Puoi ancora usarlo se vuoi, ho solo pensato che dovresti sapere degli svantaggi.

TL; DR: Se lo screen-reader e il supporto del touch screen sono un problema, quindi ti incoraggio a cercare un'altra opzione.

Answer 2

Esistono molti modi per creare un menu perfetto utilizzando la codifica HTML e CSS, soprattutto se si utilizza HTML5 & CSS3 e si possono trovare molti esempi cercando su Internet. Il secondo modo semplice è usare programmi che renderanno la codifica più facile per te come il menu DHTML di Sothink, oppure http://css3menu.com