<style type="text/css">
.menuHolder {position:relative; width:150px; height:50px; margin:0 auto 200px auto;}
.menuHolder ul {padding:0; margin:0; list-style:none; position:absolute;}
.menuHolder ul li {display:block; width:150px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.menuHolder ul li a {display:block; text-align:center; width:150px; height:50px; font:bold 11px/50px verdana, arial, sans-serif; color:#fff; 
text-decoration:none;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menuHolder ul ul li a {line-height:65px;}
.menuHolder ul li.t2 a {line-height:65px; color:#036;}
.menuHolder ul ul {position:relative; z-index:-1;}
.menuHolder ul li {position:relative; z-index:10;}
.menuHolder ul li.t2:before,
.menuHolder ul ul li:before {content:""; display:block; width:130px; height:20px; position:absolute; left:10px; bottom:5px; z-index:-1; opacity:0;
-o-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.menuHolder ul li.s1 {margin-top:-50px; z-index:20;}
.menuHolder ul li.s2 {margin-top:-50px; z-index:19;}
.menuHolder ul li.s3 {margin-top:-50px; z-index:18;}
.menuHolder ul li.s4 {margin-top:-50px; z-index:17;}
.menuHolder ul li.s5 {margin-top:-50px; z-index:16;}
.menuHolder ul li.s6 {margin-top:-50px; z-index:15;}
.menuHolder ul li.t1 a {background:#777;}
.menuHolder ul li.s1 a {background:#888;}
.menuHolder ul li.s2 a {background:#999;}
.menuHolder ul li.s3 a {background:#aaa;}
.menuHolder ul li.s4 a {background:#bbb;}
.menuHolder ul li.s5 a {background:#ccc;}
.menuHolder ul li.s6 a {background:#ddd;}
.menuHolder ul li.t2 a {background:#eee;}
.menuHolder ul li.t2 {margin-top:-50px; position:relative; z-index:9;}
.menuHolder ul li:hover ul li {margin-top:-15px;}
.menuHolder ul li:hover ul li:before {opacity:1;}
.menuHolder ul li.t1:hover > a {background:#036; color:#fff;}
.menuHolder ul li.s1:hover > a {background:#258; color:#fff;}
.menuHolder ul li.s2:hover > a {background:#369; color:#fff;}
.menuHolder ul li.s3:hover > a {background:#47a; color:#fff;}
.menuHolder ul li.s4:hover > a {background:#58b; color:#fff;}
.menuHolder ul li.s5:hover > a {background:#69c; color:#fff;}
.menuHolder ul li.s6:hover > a {background:#7ad; color:#fff;}
.menuHolder ul li.t2:hover > a {background:#8be; color:#fff;}
</style>
<br><br>
<div class ="menuHolder">
    <ul>
	   <li class ="t1"><a href="#url">Menu</a>
		  <ul>
			 <li class ="s1"><a href="#">About Us</a></li>
			 <li class ="s2"><a href="#">Products</a></li>
			 <li class ="s3"><a href="#">Services</a></li>
			 <li class ="s4"><a href="#">Contact</a></li>
			 <li class ="s5"><a href="#">Special Offers</a></li>
			 <li class ="s6"><a href="#">Team</a></li>
		  </ul>
	   </li>
	   <li class ="t2"><a href="#url">Close X</a></li>
    </ul>
</div>