HTML and CSS Reference
In-Depth Information
padding: 10px 20px;
}
Here, you make the links within the list items
display: block;
. When you make the
<a>
elements block
(remembering they're inline by default), they can now take on dimensional properties and, as such, become
bigger than if they were left as inline.
Take a breather here for a minute. As shown in Figure 9-15, you now have a partially styled submenu but it's
more of a drop-up list at the moment! This is caused because the child lists of the top-level lists are in flow
and affecting the elements around them. The answer is to take them out of flow.
Figure 9-15
The second-level unordered lists, which need to be positioned differently.
5.
Add the following rule set below the
#header nav ul li a
rule set:
#header nav ul ul {
/*style all lists below the top-level list*/
background: #f5f5f5;
border: 1px solid #ccc;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top: none;
padding: 20px 0;
position: absolute;
min-width: 140px;
}
This rule set styles any unordered list below the top-level list, and because the drop-down menu consists of
quite a few rule sets, a comment is added in this rule set to remind you or anyone else in the future what this
rule set selects—a good practice, particularly when selectors start to get complex.
Along with the borders, padding, and a minimum width, you also give the drop-down menus an absolute posi-
tion, moving them out of flow so they no longer affect the elements around them. However, as shown in
Figure 9-16, although the drop-down menu kind of looks as though it's in the right position, it's hidden be-
hind the product showcase.
