@charset "utf-8";
/* CSS Document */
<style type="text/css">

#example1{

width:140;
height:20px;
background:#000;

}

.parent{

position:relative;
display:block;
width:50px;
height:20px;
float:left;

}

.parent2{

position:relative;
display:block;
width:160px;
height:20px;
text-align:left;
text-indent:4px;
float:left;

}
.buttons{

float:left;
display:inline-block;
text-align:center;
width:180px;
height:20px;
line-height:50px;
background:#e5e5e5;

}

.sub{

visibility:hidden; /* This hides the menu until we hover */
position:absolute;
top:20px;
left:0;
width:180px;
height:160px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
overflow:hidden;

}

.parent:hover .sub{

visibility:visible; /* This makes the menu visible when user hovers */
text-align:center;

}

.parent2:hover .sub{

visibility:visible; /* This makes the menu visible when user hovers */
text-align:center;

}
.sub a{


color:#FFF;
background:#7f7f7f;
background:rgba(255,255,255,0.6);
display:block;
width:170px;
height:40px;
text-indent:4px;
text-align:left;
line-height:40px;

}

.sub a:hover{

background:#7f7f7f;
  background:rgba(255,255,255,0.3);
color:#000;

}

  #two{

visibility:visible!important;
height:0;
transition:height 0.2s ease-in-out;
-moz-transition:height 0.2s ease-in-out;
-webkit-transition:height 0.2s ease-in-out;
-o-transition:height 0.2s ease-in-out;

}

.parent2:hover #two{

height:160px;

}

#two a{

opacity:0;
transition:opacity 0.2s ease-in-out;
-moz-transition:opacity 0.2s ease-in-out;
-webkit-transition:opacity 0.2s ease-in-out;
-o-transition:opacity 0.2s ease-in-out;
transition-delay:0.2s;
-moz-transition-delay:0.2s;
-webkit-transition-delay:0.2s;
-o-transition-delay:0.2s;

}

.parent2:hover #two a{

opacity:1;

}

</style>