#multi_drop_menus li {
border:2px solid blue;
list-style-type:none;
?¬‚ oat:left;
position:relative;
}
shows the container
removes the bullet from each list
item
makes the list items sit side by side
positioning content for the nested
ul (the drop-down)
DESIGNING INTERFACE COMPONENTS 225
#multi_drop_menus li ul {
position:absolute;
width:7em;
}
#multi_drop_menus li ul li{
width:100%;
}
FIGURE 6.44 With the positioning
relationship created between the list
and the sublist, and the li elements
forced to ?¬? ll the dimensioned ul element,
the sublist elements stack to
create the drop-down menu.
Once we tell the drop-down that its positioning context is the outer
list, it positions itself nicely, as shown in Figure 6.44, right below the
top level of the menu, just where we want it. Now, we set a width for
the drop-down??™s ul element??”I chose 7 ems, and you can make it as
wide as you want??”and then set its child li elements to width:100%
to force each one to ?¬? ll the width of ul. With room for only one li
across the width of the ul, they stack one under the next, which is
just what we want. We didn??™t even have to un?¬‚ oat them.
Now we get to the fun bit where we bring our menu to life, so that
the drop-down only appears when we hover over the related toplevel
element.
#multi_drop_menus {
behavior:url(.
Pages:
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265