<style>
  .boxes {  
background:#fff;  
border:1px solid #ccc;  
float:left;  
padding:10px;  
position:relative;  
width:510px;  
  }  

  div.info {  
border-bottom:1px solid #CCCCCC;  
float:left;  
margin:0;  
padding:0;  
width:100%;  
  }  

  .block {  
color:#0066CC;  
float:left;  
overflow:hidden;  
width:510px;  
position:relative;  
  }  

  .block h4, .block h4 a{  
color:#333333;  
font-size:11px;  
padding:5px 0;  
text-shadow:0 1px 1px #C13D93;  
text-transform:uppercase;  
}  
  div.menu{  
float:left;  
height:50px;  
position:relative;  
width:500px;  
z-index:1000;  
  }
  ul.blockeasing {  
color:#CCCCCC;  
float:left;  
font-size:11px;  
padding:0;  
width:560px;  
  }  
  ul.blockeasing li{  
background:none repeat scroll 0 0 #333333;  
border:2px solid #000000;  
display:block;  
float:left;  
height:15px;  
list-style:none outside none;  
margin:0 5px;  
padding:5px 0px;  
text-align:center;  
text-shadow:0 1px 1px #000000;  
text-transform:uppercase;  
width:130px;  
  }  

  ul.blockeasing li.main{  
height:18px;  
position:relative;
  }  

  ul.blockeasing li a{  
color:#CCCCCC;  
  }  

  ul.blockeasing li ul.subnav{  
background:none repeat scroll 0 0 #333;  
border-bottom:2px solid #c13d93;  
float:left;  
padding:0px 5px 0;  
position:absolute;  
left:-50%;  
width:250px;  
margin-top:15px;  
height:0px;  
display:none  
}  

  ul.blockeasing li ul li{  
border:none;  
border-bottom:1px solid #ccc;  
padding:5px;  
float:left;  
width:100px;  
overflow:visible  
}  
  </style>

  <script type="text/javascript" src="/js/jquery-ui.min.js"></script>

  <script type="text/javascript">
$(document).ready(function() {  
$("ul.blockeasing li.main").mouseover(function(){ //When mouse over ...  
//Following event is applied to the subnav itself (making height of subnav 60px)  
$(this).find('.subnav').stop().animate({height: '60px', opacity:'1'},{queue:false, duration:1500, easing: 'easeOutElastic'})  
});  

$("ul.blockeasing li.main").mouseout(function(){ //When mouse out ...  
//Following event is applied to the subnav itself (making height of subnav 0px)  
$(this).find('.subnav').stop().animate({height:'0px', opacity:'0'},{queue:false, duration:1600, easing: 'easeOutElastic'})  
});  

//menu itembackground color animation
$("li").hover(function() {  
$(this).stop().animate({ backgroundColor: "#C13D93"}, 600);},  
function() {  
$(this).stop().animate({ backgroundColor: "#333333" }, 600);  
});  

  });  
  </script>

<div class="menu">
<ul class="blockeasing">
<li class="main"><a href="#">About Us</a>
<ul class="subnav">
<li><a href="#">Overview</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Why Us</a></li>
</ul>
</li>
<li class="main"><a href="#">Products</a>
<ul class="subnav">
<li><a href="#">Main Product</a></li>
<li><a href="#">DSL Lines</a></li>
<li><a href="#">DialUps</a></li>
<li><a href="#">Main Stream</a></li>
</ul>
</li>
<li class="main"><a href="#">Contact Us</a>
<ul class="subnav">
<li><a href="#">Twitter</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</li>
</ul>
</div>  
  <br clear="all">