Step 1: Create the HTML
If you think about it, a menu is nothing more than a list of hyperlinks, so an unordered list with anchor tags works perfectly. Here we’ve created a list with three main items, the last one containing three sub-items:
Step 2: Make the top-level menu flexible
This step involves setting the top level ul element to display: flex, and giving it’s children, the top level li’s, a flex-grow of 1, so they expand to the full width of the viewport. Now we have a horizontally oriented, responsive, and flexible menu. To make the flex-box layout look correct, we’ve also removed the default margin and padding from the ul and li elements, and we’ve removed the bullet points from the list items:
Step 3: Add color and dimension
Before we add the dropdown functionality, we need to give the menu some style. There are a number of small steps here, but they all relate to each other, so I think its easiest to keep them together. See the /*Step 3*/ code in the code window to follow along:
Color: The top list items have been given a background color of dimgray, with a margin-right of 2px to distinguish them. The secondary list items have been colored dodgerblue and tomato, with top margins of 2px. In addition, the color of the anchor tags has been changed to white and the anchors have been given some basic style.
Dimension: Each anchor tag has been given a padding of 1em, and set to display: block to show the padding. In addition, we’ve given the submenu’s ul tag (containing Item 3-1 through 3-3), a width of 100% and set it to position: absolute, which along with it’s parent li element set to position: relative, will allow it to flexibly stretch along with its parent, Item 3 (for more information on absolute relative positioning, see this article) .
Step 4: Add the dropdown effect
This step is relatively simple, but it deserves its own step, as it is where we give the menu its namesake functionality. We do this with only two declarations. First we give the submenu’s ul tag a display of none as default. Then we give it a display of block when its parent li element (i.e. Item 3) is hovered over.
Step 5: Add additional hover effects on the list items
To give the menu more of an interactive feel, the final step is to add hover effects to each of the list items. To do this I assigned rgba functions to the hover states of each item, with an opacity value of .7 (70% opaque). Again, the three declarations (one for each color) are at the top of the code window for visibility:
And that’s it. Hopefully this demystifies the process of creating a dropdown menu. You can use these principles to add as many menu items and effects as you want.