Справочник фронт-энд девелопера: виды горизонтальных панелей навигации

[@crea7or]

1 и 3 — остальные не нужны.

[@Pierre_b]

мой стандарт:

.menu ul li{
position:relative;
display:inline-block;
vertical-align:top; /*FIX IE*/
//float:left; /*FIX IE*/
}

и в IE можно не проверять)

[@oWeRQ]

Беглый тест в IE6-7 показал:
1. position:relative; не влияет на раскладку
2. не ведет себя как inline-block, а ведет себя как float
3. vertical-align:top; делает ul высотой равной высоте строки внутри .menu (что поначалу сбило с толку)

Вывод:
Решение не рабочее, избыточное, запутывающее(коммент про vertical-align и хак с 2 слешами вместо звездочки).

Решение давно известно:

display: inline-block;
*display: inline;
zoom: 1;

З. Ы. Если нужна поддержка IE — надо проверять, особенно в вашем случае.

[@JiLiZART]

Для html5 есть flexbox umaar.github.io/css-flexbox-demo/, но жаль что пока не все браузеры это умеют.

[@JiLiZART]

css3*
Вот еще статейка на эту тему www.html5rocks.com/ru/tutorials/flexbox/quick/

[@Piterski]

Не совсем понятно зачем в примере на :hover дополнительно прописаны transition-duration

li a:hover {
    padding-bottom: 3px;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
    border-bottom: 1px solid #dd9999;
}

[@Piterski]

Да и border повторяется

li a:hover {
    padding-bottom: 3px;
}

[@crwin]

Для того, чтобы вернуть исходное состояние с заданным эффектом, без него это был бы просто скачок.

[@Piterski]

Ничего подобного, не будет никакого скачка. Все данные анимации задаются один раз, как правило главному классу. А дальше всем манипуляциям типа :hover или просто через добавление класса, добавляются только свойства которые нужно поменять — jsfiddle.net/kjCL7/20/

[@opium]

Мне одному показалось, что это крутой материал?

[@agagey]

Пустую строку после justify-style меню как-то можно сделать нулевой высоты?