Creating Drop-Down Menus with Lists

Although we don’t talk about lists until Chapter 15, I’ll advance you a technique for using them to format navigation links into drop-down (or pop-out) menus with CSS. You may want to come back to this section after having gone through that chapter.

To create drop-down menus with lists:

1.
In the (X)HTML file (Figure 12.11), create navigation links in the form of a nested list like the one on page 224. The first level items will always be visible, the second (and subsequent) level items will only be visible when hovered over.
Figure 12.11. Note that each of the submenus is a ul with its li elements within opening and closing tags of the top level li item. The links are empty to save space in this illustration, ...

Get HTML, XHTML, & CSS, Sixth Edition: Visual QuickStart Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.