What you??™ll learn How to create a multicolumn drop-down menu, based on the code
from the previous exercise.
Completed files The drop-down-menu-multi-column folder in the chapter 5 folder.
The final example in this chapter is a multicolumn drop-down menu. These are increasingly
common, enabling sites to provide a lot of links in a drop-down that simply wouldn??™t
fit on the screen if they were listed vertically. For an example of such a drop-down in
action (although one that uses a different method), visit www.2000adonline.com/books/
and hover over the Books List link.
Creating a multicolumn drop-down menu
If you decide to create drop-down menu??“based navigation, avoid copying an operating
system??™s menu style, because this may confuse visitors using that operating system
and irritate visitors using a rival system. The exception to this rule is if you??™re creating
a site that centers around nostalgia for the days where operating systems used to
come on floppy disks. One such site??”an amusing Mac OS System 7 look-alike??”can
be found at http://myoldmac.net/.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
226
1. Edit the HTML to remove the existing nested lists. Then, for the multicolumn dropdown,
decide which link you want it to spawn from and place an unordered link in
its parent list item, with a single list item of its own. Within that list item, place the
unordered lists for the columns in the drop-down, one after the other.
Pages:
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323