Рассмотрим популярный быстрый способ создания горизонтального резинового меню. Здесь не понадобятся фиксированные или процентные размеры пунктов, меню будет тянуться во всю ширину контейнера, в котором оно находится.

В качестве структуры для меню используем обычный список ul с элементами li. Кроме того, вместо ul и li можно использовать обычные блоки div, результат будет такой же.

HTML

<div class="menu-wrapper">

    <ul class="menu">

        <li><a href="#">Main</a> </li>

        <li><a href="#">About company</a> </li>

        <li><a href="#">Development</a> </li>

        <li><a href="#">Products</a> </li>

        <li><a href="#">Store</a>  </li>

        <li><a href="#">Contacts</a> </li>

    </ul>

</div>

Для того, чтобы меню тянулось на всю ширину страницы, пишем для ul правила display: table; width: 100%, обнуляем все отступы margin и padding. Для пунктов li указываем display: table-cell, а также float: none (в случае если для элементов уже прописано правило float: left, которое не позволит растянуть меню на всю ширину родительского контейнера). Ссылки внутри li объявляются блоками для удобства их дальнейшего «раскрашивания»: ссылка растянется на всю ширину элемента li. Дописываем различные правила для текста, фона и необходимые отступы. Важное замечание: данный способ не будет работать в IE7 и ниже.

CSS

.menu {

    display: table;

    width: 100%;

    margin: 0;

    padding: 0;

}

.menu li {

    display: table-cell;

    float: none;

}

.menu li a {

    display: block;

    padding: 8px 15px;

    background: #2767A0;

    font-family: Tahoma;

    font-size: 12px;

    color: #fff;

    text-decoration: none;

    text-align: center;

    text-transform: uppercase;

}

.menu li a:hover {

    background: #528CBF;

    transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

}

Резиновое меню на css

Прием, который позволяет сделать меню резиновым (в него можно будет добавлять новые пункты и размер не увеличиться, а всегда будет 100% родительского блока).

    блок обертка для меню
    само меню, выведенное через маркированный список (тег ul)
    ну и пункты меню внутри, а в них, соответственно, уже ссылки

Код разметки:

<div class = "wrap">
<ul class = "r-menu">
<li><a href = "#">Пункт 1</a></li>
<li><a href = "#">Пункт 2</a></li>
<li><a href = "#">Пункт 3</a></li>
<li><a href = "#">Пункт 4</a></li>
<li><a href = "#">Пункт 5</a></li>
</ul>
</div>

Теперь будем приводить все в нужный вид при помощи CSS.
Базовые стили

Создаем и подключаем таблицу стилей к html документу. Первым делом я сброшу отступы у всех элементов.

*{      margin: 0;      padding: 0;}

Это стандартный код, для верстки реальных сайтов рекомендую использовать более серьезное решение — файлы типа reset.css.

Далее добавим стили блоку-обертке. А именно, установим максимальную ширину в 600 пикселей (просто чтобы удобно было делать скриншот, чтобы меню влезало), а также отцентрируемблок.

.wrap{      background: #fff;      max-width: 600px;      margin: 0 auto;}
Реализуем резиновость

Теперь беремся за само меню. У него (у тега ul) уберем маркеры, сделаеь фоновый линейный градиент, и, самое главное, свойством display: table-row заставим контейнер для меню вести себя как табличный ряд. Это важно сделать для дальнейших манипуляций.

.r-menu{

      background: linear-gradient(to right, #b0d4e3 0%,#88bacf 100%);

      display: table-row;

      list-style: none;

}

Как видите, приведенный код как раз решил все, о чем  писалось. Кстати, градиенты удобно генерировать с помощью инструмента Ultimate CSS Gradient generator.

Далее нужно задать стили для пунктов меню. Вот:

.r-menu li{

      vertical-align: bottom;

      display: table-cell;

      width: auto;

      text-align: center;

      height: 50px;

      border-right: 1px solid #222;

}

Пояснение:

    vertical-align: bottom — это свойство необходимо для того, чтобы в случае, если текст в пункте меню займет 2 строки, он отображался ровно. Когда мы сделаем меню, можете удалить это свойство, увеличить масштаб чтобы пункты сжались и текст перенесся на две строки и увидите проблему с отображением. Верните свойство и все будет нормально.
    display: table-cell — поскольку мы задали самому меню отображения табличным рядом, логично будет задать его пунктам отображение как ячейки в таблице. Это обязательно.
    width: auto — ширина будет вычисляться автоматически, в зависимости от длины текста в пункте
    text-align: center — это просто для выравнивания текста внутри по центру
    height: 50px — задаем высоту в 50 пикселей
    ну и border-right это просто граница справа, такой разделитель для пунктов

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

Последнее, что нужно сделать — задать стили ссылкам внутри пунктов. Тут такой код:

.r-menu li a{

      text-decoration: none;

      width: 1000px;

      height: 50px;

      vertical-align: middle;

      display: table-cell;

      color: #fff;

      font: normal 14px verdana;

}

пояснение некоторых строк:

    свойство text-decoration отменяет подчеркивание у ссылок, которое ставится по умолчанию
    width: 1000px — пожалуй, самая важная строка. Нужно задать ссылкам примерно такую ширину, можно и меньше, но обязательно больше максимально широкого пункта меню. Ссылки не станут в ширину 1000 пикселей, поскольку ширину ограничит пункт меню li, у которого ширина задана как auto, зато это позволит сделать так, чтобы при любом количестве пунктов в меню оно всегда было на 100 процентов ширины.
    vertical-align: middle и display: table-cell — первое выровняет текст по вертикали по центру, а второе также делает отображение ссылок в виде ячеек. Оба свойства нужны.
    font— ну это просто набор установок для шрифта.

Добавление интерактивности

Например, чтобы при наведении изменялся цвет пункта меню. Реализуется это совсем просто, с помощью :

.r-menu li:hover{      background-color: #6bba70;}
Тестируем меню на резиновость

Отлично, меню готовы, но мы не проверили самое главное — насколько оно резиновое. Добавлим в меню еще 2 пункта:

Меню осталось в ширину на 600 пикселей. Остальные пункты просто немного ужались, чтобы поместились 2 новых.

Добавим еще 1 длинный пункт:

Как видите, меню еще немного ужалось и длинный пункт отобразился вполне себе нормально. А если бы не было свойства vertical-align: bottom, о котором  говорилось, то меню выглядело бы хуже.

Уменьшим меню до трех пунктов.

Пунктам стало гораздо свободнее, но само меню не поменялось в ширине. Вот мы и сделали 100% резиновое меню!
Как его адаптировать?

В принципе, если вы задали блоку-обертке не фиксированную, а максимальную ширину, то его даже не нужно адаптировать. В моем случае у меня стоит свойство max-width: 600px и когда ширина станет меньше 600 пикселей, блок просто будет уменьшаться вслед за экраном, не образуя горизонтальной прокрутки.