Creating a drop-down menu
Drop-down menus are often used in web applications to show extended functionality. Actions that are used less often or useful to a small number of users can be added to the menu, resulting with a cleaner interface.
HTML5 and CSS3 allow us to build drop-down menus written entirely in CSS. We're going to create such a menu in this recipe.
Let's analyze the structure of a drop-down menu. A drop-down menu has an activation button that displays it and one or more items from the following:
- A regular (action) item
- A separator item
- A submenu item (that activates a sub-menu)
Our HTML element structure should reflect the drop-down menu structure. Our CSS code will control the positioning and display of the menu.
We're going ...