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

Project files update (ch09-01): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
www.wiley.com/go/treehouse/css3foundations .
Using display, position, and z-index to Create a Drop-
Down Menu
Now that you have the power of display and property tucked into your CSS utility belt, you can flex this
knowledge and create a drop-down menu.
1. In index.html, below this HTML:
<a href=”#” title=”Visit our shop”>Shop</a>
Add the following HTML:
<ul>
<li><a href=”#” title=””>Trainers</a>
<ul>
<li><a href=”#” title=””>Womens</a></li>
<li><a href=”#” title=””>Mens</a></li>
</ul>
</li>
<li><a href=”#” title=””>Shoes</a>
<ul>
<li><a href=”#” title=””>Womens</a></li>
<li><a href=”#” title=””>Mens</a></li>
</ul>
</li>
<li><a href=”#” title=””>Slippers</a></li>
<li><a href=”#” title=””>Socks</a></li>
</ul>
2. Save index.html
This HTML will add a submenu to the Shop link. Now to style it:
3. In styles.css, below the #header nav > ul > li rule set, add the following rule sets:
#header nav ul > li:hover {
background: #f5f5f5;
}
#header nav ul ul > li:hover {
background: white;
}
These rules make each navigation link of the top-level list a gray color and any link from second-level lists on-
ward white whenever hovered over.
4. Below the #header nav ul ul > li:hover rule set, add the following rule set:
#header nav ul li a {
color: black;
display: block;