Understanding Display, Position, and Document Flow - CSS3 Foundations - page 152

Now the third-level menus are positioned relative to their respective second-level link instead of the overall
second-level list. The top value of -1px accounts for the 1 pixel border.
This wouldn't be much of a drop-down menu if it constantly sat there with every link showing; after all, the
point of a drop-down menu is to make better use of space, hiding links until the user needs to use them.
10. Add a declaration to the #header nav ul ul rule set:
visibility: hidden;
11. Below the rule set #header nav ul ul ul , add a new rule set:
#header nav li:hover > ul{
/*show the menu of the list item being hovered over*/
visibility: visible;
}
Here, you hide any list of links below the top level and allow them to become visible only when the user hov-
ers over their respective parent link.
Finally, for the drop-down menu, make the corners of the top-level list rounded.
12. Below the rule set #header nav > ul > li , add two new rule sets:
#header nav > ul > li:first-child {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
#header nav > ul > li:last-child {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
13. Save styles.css.
Congratulations! The drop-down menu is now fully functional, as was shown in Figure 9-2. Before you move on,
though, you need to understand what that z-index declaration does.
z-index
Initial value: auto | Inherited: No | Applies to: Positioned elements | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 4+, Safari 1+
When giving elements a position declaration, you might find that sometimes elements overlap one another. The
problem you saw in Figure 9-16, where the drop-down menu appears behind the product showcase, is that both of
these elements have a defined position and neither one is in flow, making them visually clash—meaning one sits be-
hind the other. When elements are taken out of flow, a page becomes three-dimensional, and by using z-index ,
you can control the stacking order of those elements.
The z-index , by default, is auto , meaning the stacking order is 0 . By giving the z-index property a number as
a value, you determine how high up the stack an element is.
Before you gave the drop-down menu a z-index , it and the product showcase had a default stack order of 0 . If two
elements are both at the same position in the stack order, their positioned is determined by the order of the HTML;