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;
}