Menú tipo Pestañas

[canzoneta]

Tengo muy poca experiencia en CSS, por eso los molesto. en el siguiente menú, deseo que al pasar el mouse por arriba, en lugar que la pestaña se alargue hacía abajo, lo haga hacía arriba.

Desde ya, gracias por la ayuda.

CSS:

Código HTML:

#multicolorido{
margin-left:auto;
margin-right:auto;
width: 900px;
}

#menuayuda-blogger {
margin:0px auto;
/* height:33px; */
}

#menuayuda-blogger ul {
margin:0;
padding:0;
/*padding-top:12px;*/
list-style:none;
}

#menuayuda-blogger li {
box-shadow: 1px 0px 1px 1px #7a7a7a; 
border-radius: 15px 15px 0 0;
float:left;
margin:0 !important;
padding:0 1px 0 0 !important;
font-family: 'Verdana', arial, serif;
list-style:none;
}

#menuayuda-blogger a {
font-size: 12px;
font-family: 'Verdana', arial, serif;
float:left;
text-decoration:none;
color:#fff;
margin:0;
padding: 12px 10px;
}

#menuayuda-blogger a:hover {
text-decoration:none;
color:#fff;
}

#menuayuda-blogger ul li.naranjo{ /*Naranjo*/
background: #f59c1b;
} 

#menuayuda-blogger ul li.naranjo:hover{
height:50px;
} 

#menuayuda-blogger ul li.celeste{ /*Celeste*/
background: #00addf;
} 

#menuayuda-blogger ul li.celeste:hover{
height:50px;
} 

#menuayuda-blogger ul li.verde{ /*Verde*/
background: #a2c64e;
} 

#menuayuda-blogger ul li.verde:hover{
height:50px;
} 

#menuayuda-blogger ul li.rojo{ /*ROJO*/
background: #e02309;
} 
#menuayuda-blogger ul li.rojo:hover{
height:50px;
} 
#menuayuda-blogger ul li.gris{ /*GRIS*/
background: #4d4c4c;
} 

#menuayuda-blogger ul li.gris:hover{
height:50px;
} 

#menuayuda-blogger ul li.azul{ /*AZUL*/
background: #0071a9;
} 

#menuayuda-blogger ul li.azul:hover{
height:50px;
}

HTML:

Código HTML:

<div id='multicolorido'><div id='menuayuda-blogger'>
<ul>
<li class='naranjo'><a href='#'>Título 1</a></li>
<li class='celeste'><a href='#'>Título 2</a></li>
<li class='verde'><a href='#'>Título 3</a></li>
<li class='rojo'><a href='#'>Título 4</a></li>
<li class='gris'><a href='#'>Título 5</a></li>
<li class='azul'><a href='#'>Título 6</a></li>
</ul>
</div></div>