HTML and CSS Reference
In-Depth Information
inside the
Product 2
list item, which in turn is nested inside the
Products
list item.
so, in effect, the mouse is also hovering over the parent list items. As a result, the
child selector targets the links that are direct children of each list item. This concept
can be difficult to grasp, but seeing is believing.
Figure 11-19.
The child selector styles the links in the parent list items, too
13.
make the top-level menu accessible to keyboard navigation by amending the
selector of the style rule you created in step 11 like this:
#nav li:hover>a
, #nav a:focus
{
background-color: #A38E6D;
color: #444;
}
14.
save the styles, and test the menu again by pressing the Tab key. The top level links
change color when you tab to them.
15.
To give the submenus different colors from the main menu, add the following styles.
The first one is a descendant selector that styles the links in their normal state. The
second one is an adaptation of the child selector in step 11. it sets the colors for
both the link currently being hovered over and the parent list item.
#nav ul a {
background-color: #8C3A40;
}
#nav ul li:hover > a {
background-color: #C2644F;
}
16.
The final touch is to tidy up the borders on the first link in the main menu, the first
list item in a deeply nested menu, and on submenu links. Add the following style rule
to the style sheet:
#nav li:first-child a, #nav ul ul li:first-child, #nav ul a {
border: none;
}
17.
save the styles, and test the menu again. it should now look like Figure
11-20
.
