Menu bars and drop-down menus are common features in Web design. Traditionally, implementing them requires the use of CSS and/or scripting. However, HTML now provides elements that make this more straightforward. The downside is that, as of time of writing, they are yet to be supported by any of the major browsers. These elements are <menu> and <menuitem> and are typically used in combination with other elements, such as the <button> element. The <menu> element is used to specify the menu bar, and the <menuitem> element is used to specify the menu items on the drop-down menu. The <button> element, which again is introduced more fully in Chapter 5, is used for interactivity. Figure 3.37 uses part of the example given in the W3C draft specification to explain how these elements are intended to work together. It should display a menu bar that contains a single button (i.e., a menu) that has a “File” label, which when clicked displays a drop-down menu that lists three menu items (“New…,” “Open…,” and “Save…”). In order to make something happen when a menu item is clicked, other attributes are used on each <menuitem> element to specify an action. No doubt, when the elements are supported and it is clear how they work, there will be ample examples on the Web.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.