<style type="text/css">
.miniIconPanel {width:30px; height:23px; padding:6px; background:#fff; border-radius:8px; position:relative; box-shadow:0 0 3px rgba(0,0,0,0.5);} 
.miniMenu {position:relative; width:30px; height:23px; margin:50px 0 250px 50px; /* this demo only */}
.miniMenu input {display:none;}
.miniMenu label {display:block; width:44px; height:37px; position:absolute; left:-1px; top:-1px; z-index:10; cursor:pointer;}
.miniMenu div.miniIcon {display:block; width:30px; height:13px; position:absolute; left:6px; top:6px; border:5px solid #000; 
border-width:5px 0; z-index:5;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.miniMenu div.miniIcon b {display:block; width:30px; height:5px; background:#000; position:absolute; left:0; top:4px; opacity:1;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.miniMenu ul {padding:0; margin:0; list-style:none; position:absolute; top:0; left:50px; width:400px; opacity:0; visibility:hidden;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.miniMenu li {display:block; float:left; position:relative; z-index:10;}
.miniMenu #open:checked ~ .labelOpen {z-index:5;}
.miniMenu #close:checked ~ .labelClose {z-index:5;}
.miniMenu #open:checked ~ div b:first-child {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.miniMenu #open:checked ~ div.miniIcon {
border-color:transparent;
}
.miniMenu #open:checked ~ div b:last-child {
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.miniMenu #open:checked ~ ul {visibility:visible; opacity:1;}
.miniMenu li a {display:block; font:600 14px/40px 'Open Sans', arial, sans-serif; text-align:center; height:40px; width:400px; 
position:relative; text-decoration:none; color:#eef;
background-image: -webkit-linear-gradient(#485258, #333);
background-image: -ms-linear-gradient(#485258, #333);
background-image: -o-linear-gradient(#485258, #333);
background-image: linear-gradient(#485258, #333);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.1),
inset 0 -1px 0px rgba(0,0,0,0.2),
0 8px 16px 0 rgba(0,0,0,0.3),
0 4px 4px 0 rgba(0,0,0,0.3),
0 0 0 1px rgba(0,0,0,0.2);
}
.miniMenu li:hover {z-index:100;}
.miniMenu li a:hover {background:#333; color:#80c080; line-height:41px; width:398px; margin-left:1px;
text-shadow:0 0 1px #000, 0 0 5px rgba(128,192,128,0.9);
box-shadow: 
inset 0 0 4px 3px rgba(0,0,0,0.2), 
inset 0 0 10px rgba(0,0,0,0.5);
}
.miniMenu li:first-child a {border-radius:8px 8px 0 0;}
.miniMenu li:last-child a {border-radius:0 0 8px 8px;}
.miniMenu li a:hover:before {content:""; display:block; width:380px; height:1px; position:absolute; left:10px; top:-1px;
background: linear-gradient(to right, rgba(128,192,128,0) 0%, #80c080 50%, rgba(128,192,128,0) 100%);
}
.miniMenu li a:hover:after {content:""; display:block; width:380px; height:1px; position:absolute; left:10px; bottom:-1px;
background: linear-gradient(to right, rgba(128,192,128,0) 0%, #80c080 50% ,rgba(128,192,128,0) 100%);
}
</style>
<div class ="miniMenu" onclick="">
    <div class ="miniIconPanel">
	   <input name="miniMenu" id="open" type="radio">
	   <input name="miniMenu" id="close" checked="checked" type="radio">
	   <label class ="labelOpen" for="open" title="Open Menu"></label>
	   <label class ="labelClose" for="close" title="Close Menu"></label>
	   <div class ="miniIcon"><b></b><b></b></div>
	   <ul>
		  <li><a href="#">As You Like It</a></li>
		  <li><a href="#">Comedy of Errors</a></li>
		  <li><a href="#">Measure for Measure</a></li>
		  <li><a href="#">Much Ado about Nothing</a></li>
		  <li><a href="#">Taming of the Shrew</a></li>
		  <li><a href="#">All's Well That Ends Well</a></li>
	   </ul>
    </div>
</div>