./../lib/js_tools/csshover.htc);
font-family:lucida, arial, sans-serif;
border:1px solid #686;
?¬‚ oat:left;
}
#multi_drop_menus ul {
border:2px solid red;
?¬‚ oat:left;
}
#multi_drop_menus li {
border:2px solid blue;
removes the default margins and
padding on the menu elements
makes the div enclose the ul
demo border now removed
makes the ul enclose the li??™s
shows the container
STYLIN??™ WITH CSS - CHAPTER 6 228
border-left:2px solid #ACA;
list-style-type:none;
?¬‚ oat:left;
position:relative;
background-color:#DED;
}
#multi_drop_menus li:?¬? rst-child {
border-left:none;
}
#multi_drop_menus a {
display:block;
padding:.3em 6px;
color:#686;
text-decoration:none;
}
#multi_drop_menus a:hover {
color:#DED;
background-color:#464;
}
#multi_drop_menus li ul {
position:absolute;
display:none;
width:7em;
left:-1px;
}
#multi_drop_menus li:hover ul {
display:block;
}
a divider between the list items
removes the bullet from each list
item
makes the list items sit side by side
positioning content for the nested
ul (the drop-down)
no divider needed to the left of the
?¬? rst list items
makes the link ?¬? ll the list item correctly
pads the link text away from the
edge of the list item
different text color for the hover
different background color for the
hover
positions the drop-down relative
the parent li positioning context
hides the drop-down (revealed
when hovered??”see below)
sets the width of the drop-down
precisely positions the drop-down
displays the menu when hovered
DESIGNING INTERFACE COMPONENTS 229
#multi_drop_menus li ul li {
width:100%;
border-right:1px solid #686;
border-bottom:1px solid #686;
border-left:1px solid #686;
}
#multi_drop_menus li ul li:?¬? rst-child {
border-left:1px solid #686;
border-top:1px solid #686;
}
* html #multi_drop_menus li ul {
border-top:1px solid #686;
}
This little demo menu works well in all the Stylin??™ browsers, including
IE6.
Pages:
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268