La css
.menu li{
position:relative;
float:left;
list-style:none;
width:140px;
height:26px;
padding-top:15px;
text-align:center;
background:#999;
color:#FFF;
border:1px solid #555;
font-weight:bold;
text-shadow:1px 1px 0px #000;
margin:1px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px 10px 0px 0px;
-webkit-transition:all 1s ease 100ms;
-moz-transition:all 1s ease 100ms;
-o-transition:all 1s ease 100ms;
transition:all 1s ease 100ms;
}
.menu li:hover{
background:#9A44A6;
border-bottom-color:transparent;
z-index:3;
box-shadow:2px -2px 4px rgba(0,0,0,0.4);
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
El HTML
<nav class="menu">
<li>Inicio</li>
<li>Misión</li>
<li>Información</li>
<li>Contacto</li>
</nav>