45A).
Note, highlighted in the code block above, the use of an Internet
Explorer behavior that invokes a piece of JavaScript code called
csshover.htc to allow Internet Explorer 6 to respond to hovers on
all elements, not just links, which is essential for this menu to work.
Remember that the path for the ?¬? le is relative to the page, not to
the CSS. This is relevant if the CSS is in a separate ?¬? le and location
hides the drop-down (revealed
when hovered??”see below)
reveals the drop-down when the
parent li is hovered
DESIGNING INTERFACE COMPONENTS 227
from the XHTML. See the sidebar ???The Hover Behavior for Internet
Explorer??? in Chapter 4 for more details.
All that is left is a bit of cleanup to get rid of the colored guide borders
that have been so helpful while we were going through this section,
and replace them with some more appropriate and attractive
styles. I??™ll also modify the markup (not shown, but in the downloadable
?¬? le) to add a third top-level menu choice and add drop-downs
to all three of them. Here??™s the CSS code for the completed menu,
with the cosmetic additions highlighted, which gives the result
shown in Figure 6.46.
FIGURE 6.46 The complete menu, all
styled up and ready to launch your
Web career into the stratosphere.
#multi_drop_menus * {
margin:0; padding:0;
}
#multi_drop_menus {
behavior:url(.
Pages:
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267