1em Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
padding: 6px 10px;
}
#subNavigation a:hover {
color: #ffd800;
}
As you can see from the following images, this navigation bar deals really well with
increased text sizes??”only when the text is absolutely massive does it not work
entirely as expected, although, crucially, it still remains usable.
The subNavigation div in this technique sometimes suffers from the hasLayout
bug in Internet Explorer 6. See Chapter 9 for a method of dealing with hasLayout.
USING LINKS AND CREATING NAVIGATION
223
5
Required files Files from the graphical-navigation-bar folder and drop-downmenu-
background.gif (which is a crop of the list item background
image) from the navigation-images folder in the chapter 5
folder.
What you??™ll learn How to work with an existing CSS-based navigation menu and
convert it into a drop-down menu.
Completed files The drop-down-menu folder in the chapter 5 folder.
The next type of navigation we??™re going to explore in this chapter is the drop-down menu.
In part popularized by operating systems such as Windows and Mac OS, drop-down
menus are convenient for storing plenty of links in a relatively small space. However, use
them with caution, because the second tier of navigation is initially hidden from view,
unlike in the previous exercise??™s system, where it was visible. However, with drop-downs,
all second-tier navigation is available from the menu.
Pages:
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320