A dropdown keeps a toggle visible and reveals a menu of selectable links when activated. Positioning the menu outside the page flow lets it appear over nearby content without shifting the layout. section 6.3.1
A common construction places the dropdown container relatively and the hidden menu absolutely, aligned beneath the toggle. A click handler toggles an open class, which CSS uses to display the menu. Prefer click activation to a hover-only approach when keyboard or touchscreen use matters. section 6.3.1
Transitions can make a menu open smoothly rather than snap into view. Fading with opacity and animating height are two approaches, each with its own complications. section 15.3
Listing 6.9 Displaying the open dropdown menu
.dropdown {
display: inline-block;
position: relative; #1
}
.dropdown-toggle {
padding: 0.5em 1.5em;
border: 1px solid #ccc;
background-color: #eee;
border-radius: 0;
}
.dropdown-menu {
display: none; #2
position: absolute;
left: 0;
top: 2.1em; #3
inline-size: max-content;
min-inline-size: 100%;
background-color: #eee;
}
.dropdown.is-open .dropdown-menu { #4
display: block; #4
} #4
.submenu {
padding-inline-start: 0;
margin: 0;
list-style-type: none;
border: 1px solid #999;
}
.submenu > li + li {
border-top: 1px solid #999;
}
.submenu > li > a {
display: block;
padding: 0.5em 1.5em;
background-color: #eee;
color: #369;
text-decoration: none;
}
.submenu > li > a:hover {
background-color: #fff;
}
See the CSS pattern for positioning the menu and showing it when the dropdown has its open class. section 6.3.1
