Трюк:
меню на всю ширину блока (статья устарела, см. flex css)

Я думаю каждый веб-разработчик не раз сталкивался с необходимостью создания динамического меню на всю ширину какого-либо определенного блока. Сделаем это БЕЗ использования таблиц.

• Меню должно растягиваться на всю ширину блока;
• При добавлении новых пунктов, меню должно расширятся и при этом вписываться в ширину блока-родителя;
• Кроссбраузерность;
• Распределение ширины пунктов в меню по подобию таблиц.

• некий блок <div>, со стилем position:relative; и шириной к примеру 600px

Ничего сложного!

<nav class="menu">
    <a href="index.html" rel="nofollow">Главная</a>
    <a href="products.html" rel="nofollow">Продукция</a>
    <a href="about.html" rel="nofollow">О компании</a>
    <a href="license.html" rel="nofollow">Условия использования</a>
</nav>

.menu {
     display: table; position: relative;
     width: 100%; height: 50px;
}
.menu a {
    display: table-cell;
    text-align: center; vertical-align: middle;
}

Для того чтобы пункты меню не были слишком сплюснутыми ( а таблица иногда так себя и ведет ), можно дописать еще несколько слов в css:

.menu a {
    display: table-cell;
    text-align: center; vertical-align: middle;
    min-width: 100px; /*устанавливаем минимальную ширины ячейки*/
}

Так же легко и непринужденно блеать, можно сделать и многоуровневые меню, с любой вложенностью, для этого тег <a> положим в <ul>, например:

<nav class="menu">
    <li><a href="index.html" rel="nofollow">Главная</a></li>
    <li><a href="products.html" rel="nofollow">Продукция</a>
        <ul>
             <li><a href="veniki.html" rel="nofollow">Веники</a></li>
             <li><a href="hueniki.html" rel="nofollow">Хуеники</a></li>
        </ul>
    </li>
    <li><a href="about.html" rel="nofollow">О компании</a></li>
    <li><a href="license.html" rel="nofollow">Условия использования</a></li>
</nav>

.menu {
     position: relative; display: table;
     width: 100%; height: 50px;
}
.menu li {
    display: table-cell; position: relative;
}
.menu li a {
    display: block; position: relative;
    width: 100%; height: 100%;
    text-align:center;
    line-height: 50px; /* для того чтобы отцентрировать текст по вертикали */
}
.menu li ul {
    display: none; position: absolute;
    width: 100%;
    margin: 0px; padding: 0px;
    border: 2px solid green;
}
.menu li ul li { display: block; }
.menu li:hover ul { display: block; }

See the Pen BKWaYz by serge (@gaserge) on CodePen.