display: table

A forma mais fácil de imitar a apresentação tabular é ...adivinhou... usar uma tabela. Já os estou a ouvir gritar. Mas se lhes disser que pode alcançar a mesma apresentação usando a propriedade display com valores tais como table, table-cell e table-row?

Infelizmente os navegadores da Microsoft (tanto no Windows como no Mac) não sabem aplicar estes valores. Trataremos deles mais tarde.

Vejamos então a marcação:

<div id="menu">
    <ul>
        <li>
            <a href="...">item 1</a>
        </li>
        <!-- outros itens da lista -->
    </ul>
</div>

Navegadores modernos

Pense nisto como uma tabela: a div actua como o elemento table, ul como o elemento tr e os elementos li como células (td):

Então o CSS seria algo como:

#menu {
    display: table;
}

ul {
    display: table-row;
}

li {
    display: table-cell;
}
   

Agora poderá adicionar algumas width e outros estilos e eis que está pronto.

#menu {
    width: 100%;
    display: table;
}

#menu ul {
    margin: 0; padding: 0;
    width: 100%;
    display: table-row; /* MS diz WTH */
    background: #ccc;
    vertical-align: middle;
}

#menu li {
    margin: 0; padding: 0;
    display: table-cell; /* Novamente, IE não
                      compreende este valor */
    text-align: center;
    vertical-align: middle;
    background: #ddd;
    border: 1px solid #ccc;
}

* html #menu li { /* MacIE */
    display: inline-block;
    width: 14%; /* um erro de espaço em branco? 
                 100 por cento a dividir por 7 
                 itens arredondado */
}

/* O truque do IE (escondido do MacIE) \*/
* html #menu li {
    display: inline;
    width: 14.2%;
}
/* */

#menu li a {
    display: block;
    width: 100%;
    vertical-align: middle;
    text-decoration: none;
    color: #008;
}

#menu li a:hover {
    background: #eee;
    color: #900;
}