body{
  font-family:'Arial';
  background-color:#EEE;
}
.menu span{
  display:inline-block;
  background-color:#FFF;
  padding-left:10px;
    padding-right:10px;
  border-radius:2px;
  user-select:none;
line-height:40px;
  box-shadow:0px 0px 20px rgba(0,0,0,.3);
    transition: all .3s ease;
}
.menu .submenu{
    background-color:#FFF;
    overflow:auto;
    display:block;
    position:absolute;
  top:50px;
  left:10px;
    min-width:150px;
    box-shadow:0px 0px 20px rgba(0,0,0,.3);
  max-height:0;
  transition: all .3s ease;
    opacity:.6;
}
.menu .submenu a{
  display:block;
  text-decoration:none;
  line-height:35px;
  padding-left:10px;
  color:#333;
  
}
.menu .submenu a:hover{
  background-color:rgba(0,0,0,.1);
}
.menu:hover .submenu{
    max-height:500px;
  transition: all .3s ease;
  opacity:1;
}
.menu:hover span{
    box-shadow:none;
    transition: all .3s ease;
}