./../lib/js_tools/csshover.htc);
font-family:lucida, arial, sans-serif;
border:1px solid #686;
?¬‚ oat:left;
}
If you try to get the drop-down
to stack by un?¬‚ oating the li elements,
you will discover what I
discovered??”IE 6 and 7 leave gaps
between the menu items. That??™s why
I adopted the approach of making
the li elements ?¬? ll the ul element,
which is actually a more robust
solution. There, I saved you another
three hours.
linking to this ?¬? le makes the dropdowns
work in IE6
STYLIN??™ WITH CSS - CHAPTER 6 226
#multi_drop_menus li ul {
position:absolute;
width:7em;
display:none;
}
#multi_drop_menus li:hover ul {
display:block;
}
FIGURES 6.45A & B Two simple
rules hide the drop-down menu
and reveal it when the associated
menu element is hovered. The
csshover.htc ?¬? le is added to
enable IE6 to respond to the hover
on the li elements.
The ?¬? rst step is to add display:none to the ul of the drop-down to
hide it. Then we add a rule with this interesting little selector
#multi_drop_menus li:hover ul {display:block;}
The highlighted part means apply this rule to the ul when its parent
li is hovered. Bingo! As soon as the top-level choice of the menu is
hovered (Figure 645B), the associated drop-down appears. When
the menu is unhovered, this rule no longer applies, and the dropdown
is hidden again (Figure 6.
Pages:
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266