HTML5, CSS3, and JavaScript Fourth Edition

• item3a
  
• item3b
  
• item3c
  

• item4a
  
• item4b
  
• item4c
  
• item4d
  
• item4e
  

When we insert this into a webpage, we will get a regular list of lists.

Phase Two: To convert this into a horizontal menu, our first step is to
modify the style sheet so the outer list items are “display: inline-block”. We
will also assign “position: relative” to the outer menu items and “position:
absolute” to the inner lists. See chapter 13 (page 138) for more information
on positioning.

#menu li { display: inline-block; position: relative; }
#menu li ul { position: absolute; }

When we refresh our webpage, we will see a horizontal list of menus, but
they are all scrunched up together.

Exam Question 284(p.353):What styling attribute makes a list horizon-
tal?
Acceptable Answer:display: inline-block;

The default display attribute for lists isdisplay: block;

Phase Three:We need some box model help. We can add these lines to
our style sheet.

#menu li { width: 150px; border: 1px black solid;