Dropdown menus are common in desktop apps. When the position property was introduced, these menus started appearing on websites. They are often used to organize the navigation links of websites with multiple levels of content. For example, suppose you are designing a site to support non-commercial bartering in your local community, and you organize the listings with this structure:
You decide to turn this list into a navbar with menus for each category. The first step is to surround the whole structure in a semantic nav element and add classes to distinguish the elements:
A horizontal navbar is a better fit for your site, so you turn the top-level list into a horizontal flex parent:
Bullets and indentation aren't needed in a graphical menu, so you strip them out from both the outer and inner lists:
You take a moment to adjust the colors and font sizes:
More space is needed around the menu headings and list items. You add some padding:
To emphasize the separation between headings and items, you add some borders. You only want borders internal to a box, so you apply them only on certain edges:
You want the inner lists to only appear when the mouse hovers over its parent, which you achieve using the display property and the :hover pseudoselector:
Try hovering over the menu headings. You should see the menus appear. However, the navbar grows taller to encompass these menus. What you want is the menu to appear below the navbar instead of inside it. This happens when you absolutely position them:
Well, it kind of happens. Without the black navbar behind it and without any background color of its own, the menu is mostly invisible. You add a background color:
That's looking better. You think it'd be nice to let the visitor know which item the mouse is currently over, so you add a hover color to the headings and items:
Notice how the menu heading reverts to its black background when you move the mouse down in the menu. You think it'd be better for it to stay highlighted, so you rewrite the selector as a direct descendent selector that only requires the parent element to be hovered instead of the heading itself:
Even when the mouse is over the dropdown menu, the parent is still considered to be hovered.
Your last step is make each list item a link that directs the visitor to some other page of your site. You add in some non-functioning placeholder anchor tags:
Try hovering the menus now. The browser is styling them as links, and they aren't readable. You remove the underlines and set the color of the anchors:
At least one problem remains. Drag the mouse to the right of a menu item's text. Only the text itself is clickable. The surrounding space is not. Try adding a background to the links and you will see the hotspot of each menu item is smaller than the surrounding box. You really want the whole box to be active. For that to happen, that extra space around the link must be absorbed by the link. You partially fix this by turning each anchor tag into a block element so it fills its available space:
This does expand the clickable region of each link, but each item still has unclickable space around it. That's the padding you added earlier. Instead of giving that padding to menu item itself, you give it to the anchors:
And there you have your dropdown menus. But suppose you decide to shove the menu headings to right end of the navbar. What happens to the rightmost menu? How can you fix it?