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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.