O'Reilly logo

HTML5 Data and Services Cookbook by Mite Mitreski, Gorgi Kosev

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required