Vamos começar

Primeiro de tudo temos que criar o html, copiar e colar o código abaixo você < head > tag de vocês html:

Código:

<div id="colormenu">
  <span class="blue"><a href="#">internet</a></span>
  <span class="red"><a href="#">learn how to</a></span>
  <span class="green"><a href="#">newspaper</a></span>
  <span class="yellow"><a href="#">twitter</a></span>
  <span class="green2"><a href="#">rss feeds</a></span>
</div>

Criando o código CSS

Ok, agora nós estamos fazendo para projetar o < div id = "colormenu" >, copiar e colar o código abaixo na sua cabeça>

Código:

#colormenu {
    margin:5px;
    padding:5px;
}

Denominando a colormenu # um

Agora vamos estilo colormenu # um, adicione o CSS abaixo:

Código:

#colormenu a{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding:6px 20px 9px 20px;
    font-size:20px;
    color:#000;
    text-decoration:none;
    font-weight:bold;
    text-transform: lowercase;
}

text-transform: lowercase; isso vai mudar todas as letras em minúsculas
text-decoration:none; isso vai remover o sublinhado de decoração
padding:6px 20px 9px 20px; estrutura é "padding: inferior direito superior esquerdo".

Denominando a tag span azul

Agora deixa o estilo do < span class = "blue" >, adicione o CSS abaixo:

Código:

#colormenu .blue a{
    border-top:6px solid #326abd;
}


Quando a rolagem do mouse

quando o mouse é rollover mudar a cor de fundo, adicionar o CSS seguinte:

Código:

#colormenu .blue a:hover{
    color:#FFF;
    background-color:#326abd;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}

Denominando a tag span vermelho

Agora deixa o estilo do < span class = "red" >, adicione o CSS abaixo:

Código:

#colormenu .red a{
    border-top:6px solid #b8462c;
}

Quando a rolagem do mouse

quando o mouse é rollover mudar a cor de fundo, adicionar o CSS seguinte:

Código:

#colormenu .red a:hover{
    color:#FFF;
    background-color:#b8462c;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}

Denominando a tag span verde

Agora deixa o estilo do < span class = "green" >, adicione o CSS abaixo:

Código:

#colormenu .green a{
    border-top:6px solid #a5cc3b;
}

Quando a rolagem do mouse

quando o mouse é rollover mudar a cor de fundo, adicionar o CSS seguinte:

Código:

#colormenu .green a:hover{
    color:#FFF;
    background-color:#a5cc3b;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}

Denominando a tag span amarela

Agora deixa o estilo do , adicione o CSS abaixo:

Código:

#colormenu .yellow a{
    border-top:6px solid #e6ab07;
}

Quando a rolagem do mouse

quando o mouse é rollover mudar a cor de fundo, adicionar o CSS seguinte:

Código:

#colormenu .yellow a:hover{
    color:#FFF;
    background-color:#e6ab07;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}

Denominando a tag 2span verde

Agora deixa o estilo do < span class = "green2" >, adicione o CSS abaixo:

Código:

#colormenu .green2 a{
    border-top:6px solid #2b9435;
}

Quando a rolagem do mouse

quando o mouse é rollover mudar a cor de fundo, adicionar o CSS seguinte:

Código:

#colormenu .green2 a:hover{
    color:#FFF;
    background-color:#2b9435;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}

É isso que temos por fim:

Colocando tudo junto

Código:

#colormenu {
    margin:5px;
    padding:5px;
}
#colormenu a{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding:6px 20px 9px 20px;
    font-size:20px;
    color:#000;
    text-decoration:none;
    font-weight:bold;
    text-transform: lowercase;
}

#colormenu .blue a{
    border-top:6px solid #326abd;
}
#colormenu .red a{
    border-top:6px solid #b8462c;
}
#colormenu .green a{
    border-top:6px solid #a5cc3b;
}
#colormenu .yellow a{
    border-top:6px solid #e6ab07;
}
#colormenu .green2 a{
    border-top:6px solid #2b9435;
}
#colormenu .blue a:hover{
    color:#FFF;
    background-color:#326abd;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}
#colormenu .red a:hover{
    color:#FFF;
    background-color:#b8462c;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}
#colormenu .green a:hover{
    color:#FFF;
    background-color:#a5cc3b;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}
#colormenu .yellow a:hover{
    color:#FFF;
    background-color:#e6ab07;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}
#colormenu .green2 a:hover{
    color:#FFF;
    background-color:#2b9435;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}


Espero que gostem do tutorial.

Vlw Por Compartilhar..