Правильная верстка горизонтального меню с разделителями

Часто начинающие верстальщики сталкиваются с трудностями при верстке горизонтального меню с вертикальными разделителями. Сегодня я хочу рассказать, как легко сделать кроссбраузерное горизонтальное меню с максимально чистым кодом.

Пишем HTML-код:

Теперь CSS:

Вот собственно и все. Однако хочу остановится на моменте скрытия первого разделителя. Если вы заметили, то я не использовал класс для первого элемента списка, а задал отрицательный margin влево, чтобы скрыть разделитель.

Код кроссбраузерный: IE6+, Opera 9+, Firefox 2+, Chrome, Safari

Смотрим ДЕМО

  • dimka

    Изящный способ ! Спасибо !

    Однако вопрос, почему для ul мы использовали overflow: hidden; zoom: 1; ? Если убрать overflow: hidden; то появляется разделитель слева, но почему так, ведь Вы сказали, что для избавления от этого разделителя мы использовали отрицательный margin ?

    И ещё вопрос, zoom: 1; — это чтобы IE скушал ?

    • Отрицательный margin сдвигает LI за пределы списка, а overflow: hidden для UL скрывает все, что находится за его границами, поэтому разделитель не видно.
      zoom нужен, чтобы IE корректно обработал overflow: hidden

      • dimka

        Понял, спасибо за хороший ответ !

  • Изящный способ. Спасибо

  • Отец Михаил

    а если разделители по дизайну не такие банальные, как бордер, остается их запихивать в li или div? меню генерится динамически, проблем со скрытием первого/последнего нет

    • Да, в любой тег можно завернуть

  • ss

    Бля это немного не то..
    но спасибо тебе человечише!!!!
    я заебался искать то что мне нужно сука!!!
    и только ты лишь меня намысль навел что бы не ебать мозг а просто впиздохать на html меню в линию в шапке
    ебать спасибо!!!

  • partisan

    Правильно то правильно, но некрасиво. Бордюрчики получаются непропорционально громадными.

    Гугль не стесняется писать в строчку без списка просто через |||

    Хороший способ через добавление символа «|» в стиль через псевдокласс :before или :after, но для IE6-7, если вы их поддерживаете придется использовать expression (см. Яндекс.Субботник, где Виталий Харисов рассказывает по сабжу)

  • Матвей

    Если разделители по дизайну не такие банальные как бордер,
    то я использую их как list-style
    [css]li {list-style: url(../images/___.png);}[/css]
    При этом первоначально упомянутый бордер просто удаляю.

    • Neolot

      list-style с картинкой некорректно работает в IE6-7, лучше использовать background

      • Матвей

        Согласен, работа с background оказалась намного приятнее!!!

  • shoot

    Спасибо за изящное решение.