As mentioned earlier, element positioning has application in drop-down menus and as of time of writing is still one of the commonly used approaches. Again, this is mainly because the <menu> and <menuitem> elements (introduced in Chapter 3), which are designed specifically for this purpose, are still waiting to be supported by major browsers. The common principle is to use the <ul> or <button> element to display the menu, the display property to hide and show the drop-down menu as necessary when the cursor is on a menu, and positioning properties to position the dropdown menu relatively to the menu.
1. Drop-Down Menu Using List Elements
Figures 12.17 and 12.18 show an example of how list elements are used with positioning properties for creating the drop-down menu. Figure 12.19 shows the result.
In the example, the body{} rule sets the font for all text to Arial and aligns all elements to the center of the page. In the .menubar li{} rule, display: inline-block changes the alignment of the <li> elements of the <ul> of class=“menubar” from default vertical to horizontal and removes the bullet points; background:yellow makes the background of each <li> element yellow; padding gives the elements more width and height; cursor:pointer changes the cursor type to a finger when the cursor is on an <li> element; and position: relative positions the content of each <li> element relative to the position of the element. This ensures that each dropdown menu is aligned under its menu, as shown in Figure 12.19.
In the .menubar li a{} rule, color:black makes the color of all the text in the <a> elements and the <li> elements black and text-decoration:none removes the default underline decoration. The .menubar li:hover{} rule changes the background color of any <li> element to orange when the cursor hovers over it. The .menubar li ul {} rule styles the drop-down menu (i.e., <ul> of class=“dropdown_menu”). In it, padding removes the padding for all edges so that the left edge is aligned with that of the menu; box- shadow adds shadow to it; text-align:left aligns its content to the left; position:absolute absolutely positions it; top:39px positions it so that its top edge is flush with the bottom edge of the menu; and left:0 positions it so that the left edge is aligned with that of the menu. This is necessary because <li> elements are right-indented by default. In this case, they need to be moved left to 0, which is the position of the left edge of the containing <ul> element.
In the .menubar li ul li{} rule, background: orange makes the <li> elements in the drop-down orange; color:white makes the text white; and display:block makes the <li> elements behave like a block element again. Recall that all <li> elements were made to behave like inline-block elements before.
In the .menubar li ul li a{} rule, color: white makes the color of the text in the <a> elements in the drop-down menu white; and white-space: no wrap ensures that the text does not wrap to the next line. This means that the longest text length determines the width of the drop-down menu. Alternatively, you could specify a fixed width. The .menubar li:hover ul{} rule displays the drop-down menu when the cursor hovers over the menu (i.e., <li> element in the <ul> element of class=“menubar”). The .menubar
li ul li:hover{} rule changes the background color of any menu item in the drop-down menu to grey when the cursor hovers over it. This is any <li> element in the <ul> element of class=“dropdown_menu”.
2. Drop-Down Menu Using the <button> Element
Figures 12.20 and 12.21 show an example of how the <button> element is used with positioning properties for creating the drop-down menu. It produces the same result as Figure 12.19.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.