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 to have three buttons showing slightly different, yet structurally same, menus.

The first will have the default behavior—drops down, is left-aligned with a submenu appearing on the right-hand side.

The second will have a modified behavior—right-aligned...