Menu Colorido CSS

by Riderman Sousa

HTML

<div class="center">
    <img src="http://www.google.com/a/cpanel/bindsolution.com/images/logo.gif?service=jotspot" alt="Bind Solution" />
    <div id="colormenu">
       <span class="blue"><a href="#">services</a></span>
       <span class="green"><a href="#">portfolio</a></span>
       <span class="yellow"><a href="#">about</a></span>
       <span class="green2"><a href="#">contact</a></span>
    </div>
</div>

CSS

#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 .blue a:hover{
    color:#FFF;
    background-color:#326abd;
}
#colormenu .green a{
    border-top:6px solid #a5cc3b;
}
#colormenu .green a:hover{
    color:#FFF;
    background-color:#a5cc3b;
}

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

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

div.center {
    text-align:center;
}
div.center:hover {
    color: red;
}