W poszukiwaniu idealnego menu rozwijanego: rozciąganie do pełnej szerokości, elementy o równej szerokości, czysty CSS. Proszę pomóc rozwiązać usterki

Question

Próbuję zaimplementować menu z następujących cech:

• poziomej;
• równe pozycje menu o szerokości;
• pozycje menu rozłożone na całej szerokości strony (nie tylko tłum po lewej stronie);
• dynamiczny (reguły css nie powinny opierać się na uprzednio zdefiniowanej liczbie pozycji);
• rozwijany drugi poziom z pozycjami wyrównanymi pionowo;
• czysty CSS (bez JS!).

Wydaje się to opisywać doskonałe menu, jak to widzę.

Mam prawie succeded czyniąc go przy pięknej display: table-cell; techniki (znaczniki są pominięte dla uproszczenia):

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

Jedynym problemem jest to, że pozycje podmenu pojawiają szerokość całej strony, a częściowo poza przeglądarką okno, zmuszając poziomy pasek przewijania do wyświetlenia:

Gah! StackOverflow nie pozwoli mi publikować obrazów. Przetestuj to na żywo na JSFiddle: http://jsfiddle.net/6PTpd/9/

Mogę to przezwyciężyć, dodając float: left; clear: both; do li:hover ul li. Ale kiedy zrobić, pozycje podmenu mają różne szerokości:

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

... lub szerokość width: 15%;: http://jsfiddle.net/6PTpd/12/

Obie poprawki są brzydkie i rozwiązać problem, ani równe, ani szerokość poziomego paska przewijania problem .

UPD podczas mycia się ten post Znalazłem jakieś rozwiązanie problemu paska przewijania: set li:hover ul szerokość 0. Ale to siły do ​​spectify szerokość punktów podmenu w wartości bezwzględnej. :(Zobacz http://jsfiddle.net/6PTpd/13/

Ponadto, rozwiązanie to może ssać twardy, gdy ostatnia pozycja menu jest rozszerzona w zależności od szerokości ekranu, to może wciąż dmuchać strony szerszy niż okno. http://jsfiddle.net/6PTpd/15/

pytania:

1. Jak zrobić pozycje podmenu pojawiają się te same szerokości jak rodzica i bez włączania poziomego paska przewijania?
2. Czy istnieje inna technika CSS, który umożliwia tworzenie menu z wszystkimi warunek s opisane na początku postu?

Znalazłem wiele przykładów, ale każdy z nich jest albo nierozciągany (unosi elementy po lewej), albo nie jest dynamiczny (używa rozmiarów pobranych z predefiniowanej liczby pozycji, np.width: 20% dla każdego z pięciu elementów pierwszego poziomu lub, co gorsza, używa bezwzględnych rozmiarów!).

Answer 1

To nie jest najlepszym sposobem, aby to zrobić, ale oto rozwiązanie: http://jsfiddle.net/6PTpd/17/

Najśmieszniejsze o CSS jest to, że nawet mistrzowie są zawsze znalezienie nowych rzeczy, które można zrobić z nim. To niesamowity język w ten sposób. Właśnie dlatego dałem ci to skrzypce, abyś mógł się dowiedzieć, co robisz źle (było to głównie pozycjonowanie absolutne, BTW). ALE istnieją również luki, o których powinieneś wiedzieć.

Pozwolę sobie wyjaśnić, dlaczego prawdopodobnie nie powinieneś używać kodu w tym JSFiddle. Pierwszy problem polega na tym, że używa on display: none. To problem, ponieważ czytniki ekranu nie odczytują tekstu, który nie jest wyświetlany. (więcej o tym tutaj: http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/)

Drugi problem polega na tym, że wyświetla się po najechaniu myszą. W świecie, w którym ekrany dotykowe stają się coraz powszechniejsze, wskaźnik nie jest już najlepszą opcją.

Nadal można go używać, jeśli chcesz, tylko myślałem, że powinieneś wiedzieć o wadach.

TL; DR: Jeśli obsługa czytników ekranu i ekranu dotykowego stanowi problem, zachęcam do wyszukania innej opcji.

Answer 2

Istnieje wiele sposobów na zrobienie doskonałego menu za pomocą kodowania HTML i CSS, szczególnie jeśli używasz HTML5 & CSS3, a możesz znaleźć wiele przykładów, przeszukując internet. Drugi prosty sposób to używanie programów, które ułatwią ci kodowanie, np. Sothink DHTML Menu, lub http://css3menu.com