The simple
remedy is to convert the links to block elements also.
#multi_drop_menus a {
display:block;
background-color:#DDD;
padding:1em 6px;
}
FIGURE 6.41 With the links converted
to block elements, the
containing elements correctly size
themselves to enclose the links.
Once the links are block level elements, the containers are passed
the information they need to resize correctly, as you can see in
Figure 6.41. The next step is to make the links produce some kind
of visual response when hovered (and now that I??™ve made my point,
makes the link??™s container element
size correctly
DESIGNING INTERFACE COMPONENTS 223
we??™ll set that vertical padding to a more sensible amount at the
same time).
#multi_drop_menus a {
display:block;
background-color:#DDD;
padding:.3em 6px;
}
#multi_drop_menus a:hover {
color:#CCC;
background-color:#666;
}
FIGURE 6.42 The link background
and type color now change color
when the link is hovered.
With the hover now working, as Figure 6.42 illustrates, a little styling
of the borders and colors would give us a nice functional horizontal
menu. However, I want to leave these borders on for now so you can
clearly see what??™s happening while we look at the next step??”adding
the drop-downs. After we??™ve done that, then we??™ll make our menu
look more attractive.
CREATING THE DROP-DOWNS ON THE MENU
The various levels of the menu are created by nesting lists inside of
lists.
Pages:
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263