Dropdown

Move the mouse over the button to see the dropdown.
<div class="dropdown">
<!-- The trigger element -->
<button>...</button>
<!-- The content -->
<div class="dropdown__content">
...
</div>
</div>
.dropdown {
position: relative;
}
/* Hide the dropdown's content by default */
.dropdown__content {
display: none;
/* Position it right below the trigger element */
left: 0;
paddingtop: 4px;
position: absolute;
top: 100%;
/* It should be on the top of other elements */
background-color: #fff;
zindex: 9999;
/* Size */
height: 200px;
width: 200px;
}
/* Show the content when hover on the container */
.dropdown:hover .dropdown__content {
display: block;
}

See also

Mega menu

Menu

Nested dropdowns