Estilizando, com CSS, um simples menu

Neste rápido tutorial, vamos aprender a como criar um efeito de menu simples feito com puro CSS.

Vamos criar uma linha horizontal em forma de quadrado com links dentro. Quando passamos o mouse sobre um desses quadrados, ele vai se elevar de forma suave e o texto irá aumentar de tamanho, além de ficar em negrito.

Clique aqui e veja o exemplo

HTML

Vamos começar pelo HTML, é fácil e simples. Vamos apenas fazer uma lista não ordenada e colocar um ID chamado menu1.

<ul id="menu1">
    <li><a href="http://c-lien.blogspot.com/?Iw==">Teste 1</a></li>
    <li><a href="http://c-lien.blogspot.com/?Iw==">Teste 2</a></li>
    <li><a href="http://c-lien.blogspot.com/?Iw==">Teste 3</a></li>
    <li><a href="http://c-lien.blogspot.com/?Iw==">Teste 4</a></li>
    <li><a href="http://c-lien.blogspot.com/?Iw==">Teste 5</a></li>
    <li><a href="http://c-lien.blogspot.com/?Iw==">Teste 6</a></li>
</ul>

CSS

Usamos bordas para o efeito nos quadrados em estado hover.

ul#menu1 {
    display: inline;
    list-style: none;
}
ul#menu1 li {
    float: left;
    width: 60px;
    height:60px;
}
ul#menu1 li a {
    width: auto;
    height:45px;
    padding:5px;
    display:block;
    color:#fff;
    text-decoration: none;
    font-size:8pt;
    font-family:arial;
    line-height:50px;
    text-align:center;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
    background: #bcbfc3;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
ul#menu1 li a:hover {
    border-top: 5px solid #85888b;
    border-bottom: 5px solid #85888b;
    background:#85888b;
    font-size:9pt;
    font-weight:bold;
}

Simplicidade. Esse é o foco do menu, bem simples e ao mesmo tempo bem elegante.