HTML and CSS Reference
In-Depth Information
width: 150px;
/* Fix for IE 7 */
background-color: #FFF;
}
9.
The
top
and
left
offsets in the
#nav ul
style rule affect all nested lists. As a result,
a submenu nested at the next level will be left-aligned with its parent list item,
superimposing one submenu on top of the other. To fix this, add a new style rule that
applies to submenus nested at least two levels deep inside the main menu. set the
left
offset to the same value as the width in the previous style rule, and adjust the
top
offset like this:
#nav ul ul {
left: 150px;
top: 5px;
}
10.
save the style sheet, and test the menu again. The nested menus should now
display correctly, as shown in Figure
11-18
. They also display when tapped on a
touch screen.
Figure 11-18.
The submenus now display correctly when you mouse over them
11.
All that remains now is to fix the colors of the menu items. First, create a style rule
for links in the list item that currently is being hovered over or has focus. The rule
needs to target only links that are direct children, so you need to use a child selector
like this:
#nav li:hover > a {
background-color: #A38E6D;
color: #444;
}
12.
save the styles, and test the menu again. notice that the different colors are applied
not only to the link currently being hovered over, but also to the link in each parent
list item, as shown in Figure
11-19
. This is because the
:hover
pseudo-class is
applied to the list item rather than the link. Even though the mouse pointer is over
the last item of the second-level submenu in Figure
11-19
, the submenu is nested
