Olá pessoal,

Venho compartilhar com vocês um menu que acabei de criar usando CSS3.0.

É um menu vertical bem simples com cantos arredondados.

Bom, vamos ao que interessa:

Código CSS3.0:

/* Menu horizontal */
ul.menu-horizontal{
margin:10px 0 0 0;
padding-bottom:5px;
list-style:none;
}
ul.menu-horizontal li{
display:inline;
}
ul.menu-horizontal li a{
padding:5px;
text-decoration:none;
background-color:#CFE0FF;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-top:1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-right:1px solid #DDDDDD;
}
ul.menu-horizontal li a:hover{
background-color:#cccccc;
}
ul.menu-horizontal li a.selecionado{
background-color:#f8f7e3;
}
/* Fim menu horizontal*/

A grande diferença entre este menu e outro que não use CSS 3.0 está basicamente na propriedade “moz-border-radius” que permite que nos permite criar o menu com os cantos arredondados. O resto do código é muito facil de intender. As principais propriedades são “list-style:none;” que resulta no não aparecimento dos pontos de marcação das listas e e o “display:inline;” que faz com as li’s ficarem uma do lado da outra.

Código XHTML:

<ul class="menu-horizontal">
    <li><a href="#" class="selecionado">Principal</a></li>
    <li><a href="#">Empresa</a></li>
    <li><a href="#">Contato</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Serviços</a></li>
    <li><a href="#">Outrasinformações</a></li>
</ul>

O código acima é mais simples ainda pois apenas criei uma lista desordenada e coloquei no atributo class “menu-horizontal” para que o mesmo fique com o estilo de menu horizontal. Reparem que a 1º li possue a classe “selecionado”, isso faz com que ela apareça como se estivesse selecionada.

Para ver o exemplo, Clique Aqui!

Não esqueçam de ver a demostração.

outros 3.0, com, CSS, horizontal, html, menu, xhtml