As you can see, this is the same markup structure as the navigation
component from earlier: a div that contains an unordered list element
that contains two list items that each contains a link. Getting
these elements styled into the ?¬? nished menu so they are accurately
aligned inside one another like little Russian dolls is key to getting
the menu styled correctly. Let??™s start by applying a different colored
border or background to each of the four element types (div, ul,
li, and a) so that we can keep an eye on their relationship to one
another as we work.
#multi_drop_menus * {
margin:0; padding:0;
}
#multi_drop_menus {
border:3px solid green;
}
#multi_drop_menus ul {
border:2px solid red;
}
#multi_drop_menus li {
border:2px solid blue;
list-style-type:none;
}
a {
background-color:#DDD;
}
all elements
removes the default margins and
padding on the menu elements
the div
shows the container
shows the container
removes the bullet from each list
item
STYLIN??™ WITH CSS - CHAPTER 6 220
I ?¬? rst use the universal selector * to remove the default margins and
padding of all the elements. Then I style the border of the div green,
the ul red, and the li blue. Finally, I make the background of the
innermost element, the link (a), a pale gray??”that is going to be the
background color of the menu choices for now.
Pages:
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260