<div class="menu">
<span>Menu Principal</span>
<div class="submenu">
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
</div>
</div>
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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.