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.
Getting ready
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 ...
Get HTML5 Data and Services Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
