.dropdown
class uses position:relative
, which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute
)..dropdown-content
class holds the actual dropdown content. It is hidden by default, and will be displayed on hover (see below). Note the min-width
is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width
to 100% (and overflow:auto
to enable scroll on small screens).box-shadow
property to make the dropdown menu look like a 'card'.:hover
selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.right: 0;