dinamic menu

by jpeter06

HTML

<link  href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" >

<div class="menuPyP">
    <a class="c_green" href="#">Home</a>
    <a class="c_morado" href="#">Qu&eacute; ofrecemos</a>
    <a class="c_turquesa" href="#">Por y Para</a>
    <a class="c_orange" href="#">Contacto</a>
    <div></div>
</div>

CSS

*{
    padding:0px;
    margin:0px;
}

.menuPyP{
    font:normal 18px/16px 'Ubuntu',Arial;
    position:relative;
    top:12px;
}

.menuPyP a {
    display:block;
    text-decoration: none;
    float:left;
    background:#fff;
    padding: 12px 10px 12px 10px;
    margin-left:2px;
    margin-top:7px;
    
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.menuPyP a:hover{
    margin-top:4px;
    background:#aae;
    -webkit-transition: margin 0.3s;
    -o-transition: margin 0.3s; 
    -webkit-box-shadow: 0px -1px 2px 1px #666;
    z-index:12;
}

.menuPyP div{
    clear:both;
    background:#bbb;
    margin-top:-13;
    position:relative;
    top:-4px;
    height:2px;
}

.menuPyP a:hover.c_green{
    background:#5e5;
    color:white;
}

.menuPyP a:hover.c_morado{
    background:#a2f;
    color:white;
}

.menuPyP a:hover.c_turquesa{
    background:#8af;
    color:white;
}

.menuPyP a:hover.c_orange{
    background:#fa4;
    color:white;
}

.hover {
-webkit-user-select:none;
-webkit-touch-fallout:none;
}



/* COLORES */
.c_turquesa {
color: #8af;
}
.c_militarblue {
color: #6ae;
}

.c_pink {
color: #f6a;
}

.c_green {
color: #5e5;
}

.c_morado {
color: #a2f;
}
.c_orange {
color: #fa4;
}
.black {
color: #222;
}
.white{
color: #fff;
}

.bg_gris{
background-color: #ccc;
}

.bg_green{
background-color: #6f6;
}

.bg_morado{
background-color: #a2f;
}

.bg_orange{
background-color: #fa4;
}

.bg_turquesa{
background-color: #8af;
}