Najprostszy sposób na dynamiczne responsywne menu

Statyczne menu można bez problemu dostosowac do okna przeglądarki nawet w przypadku gdy ma być responsywne, można nadać elementom procentową szerokość. Gorzej jest gdy menu ma być dynamiczne i istnieje prawdopodobieństwo, że ilość elementów będzie się zmieniać. Przedstawione rozwiązanie jest banalnie proste ale nie jest pozbawione wad.
Szerokość elementów menu dostosowuje się automatycznie do szerokości kontenera nadrzędnego. w przypadku małej ilości pozycji w menu, szerokość elentu jest bardzo duża. W przeciwnej sytuachi elementy menu są bardzo małe lub zawartość zajmuje kilka linii.

<ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">About</a>
    </li>
    <li>
        <a href="#">Galleru</a>
    </li>
    <li>
        <a href="#">Offer</a>
    </li>
    <li>
        <a href="#">Contact</a>
    </li>
</ul>
ul {
    display: table;
    width:100%;
}
li {
    display: table-cell;
}
a {
    display: block;
    margin-right: 2px;
    padding: 5px 0;
    text-align: center;
    color: white;
    background: red;
}

Demo:
http://jsfiddle.net/kmikeblog/fzbrq38k/