HTML and CSS Reference
In-Depth Information
Figure 9-16
The drop-down menu out of flow but hidden behind the product showcase.
For now, fix this and then come back to the explanation after the drop-down menu is working.
6.
In the same rule set, add the following declaration:
z-index: 10;
The drop-down menu now appears above the product showcase, although the third level of links isn't quite
styled correctly.
7.
Below the
#header nav ul ul
rule set, add a new rule set:
#header nav ul ul ul {
/*style all lists below the second-level list*/
border: 1px solid #ccc;
border-right: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 0;
}
The links Trainers and Shoes both have their own drop-down menus (a third-level list of links). As shown in
Figure 9-17, these menus appear over their parent menu at present; ideally, it would be good to have those
menus appear to the left of their respective parent links.
