Tutorial: Como estilizar um menu com HTML5 e CSS3

Nesse post você irá aprender a criar e estilizar o menu principal do seu site usando as ferramentas mais atualizadas, o HTML 5 e o CSS3.

Primeiramente, crie um <nav> com uma lista não-ordenada onde cada item deverá ser um dos itens do menu. Atribua um identificador ao e uma classe à lista como no exemplo:

<nav id="menu-principal">
 <ul class="menu">
 <li><a href="">MENU</a></li>
 <li><a href="">MENU</a></li>
 <li><a href="">MENU</a></li>
 <li><a href="">MENU</a></li>
 </ul>
 </nav>

Com esse código o menu poderá ser visualizado no browser, porém ainda necessitará de incrementos para obter uma aparência diferenciada. A visualização será essa:

seu menu deve estar exibido dessa forma.

O próximo passo será organizar o menu na horizontal, exibindo os itens que o compõem em linha. Para isso vamos utilizar um arquivo CSS (Cascading Style Sheet, ou Folha de Estilo em Cascata), comumente usado para estilizar páginas, onde seletores são colocados para organizar a customização dos itens da página html. Devemos utilizar um seletor agrupado para estilizar vários itens do menu de uma só vez:

ul.menu li a

Esse seletor altera somente a lista não-ordenada com a classe menu e seus filhos, após definir o seletor vamos alterar suas propriedades gráficas:

ul.menu li a {
display: block;
float: left;