11 Because the multi_
level_menu.css ?¬? le is already
associated with the page, the menu
markup is instantly styled, although it
still needs work for use in this page,.
The bene?¬? t of working with the preprogrammed library components
is that you get a fairly satisfactory result ?¬? rst time. In this case,
all we need to do is tweak the colors and create some space below
the menu. A few minor changes to the menu??™s style sheet will do the
job. All the user-modi?¬? able styles for these menus are grouped at
the top of the style sheet in the same order as the markup, and each
style has a comment that explains its purpose, so it??™s easy to ?¬? nd
and change the styles we need to adjust.
div.multi_drop_menus {
behavior:url(../../lib/js_tools/csshover.htc);
font-family: arial, sans-serif;
font-size:.8em;
background-color:transparent; background-color:#AA9;
margin:0px 0 10px 0px;
}
div.multi_drop_menus ul {
border-left:1px solid #CCB;
margin-left:20px;
}
div.multi_drop_menus li {
background-color: #FFF; background-color:#EEB
border-right:1px solid #CCB;
}
div.multi_drop_menus li:hover {
background-color:#F0F7D9; background-color:#EE8;
}
for IE6 and earlier
font family for menu
size of menu??™s type relative to
parent element
creates space between the menu
and the content
menu left vertical line
removed to make menu sit all the
way to the left
level 1 menu items
creates dividing lines
hovered menu items
STYLIN??™ WITH CSS - CHAPTER 7 256
This gives the result shown in Figure 7.
Pages:
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296