HTML and CSS Reference
In-Depth Information
Figure 9-17 The third-level menus appear over their second-level parents.
8. Add the following declarations to the #header nav ul ul ul rule set:
left: -100%;
top: -1px;
Now the menus appear to the left perfectly, but each menu sits in the same position at the top. These third-level
lists inherit the declaration position: absolute; from their parent lists. Remember that the position
of an absolute element is relative to its parent, so at the moment, the declaration top: -1px; places all
third-level lists 1 pixel above the place where the second-level list is positioned. Having each third-level list
start in the same vertical position as the second-level link it belongs to would make more sense.
9. Below the rule set #header nav ul ul , add a new rule set:
#header nav ul ul li {
position: relative;
Search WWH ::

Custom Search