Positioning Elements Precisely - Beginning CSS3 - page 250

5. you want a submenu to display only when the mouse pointer is hovering over

its parent list item, so you need to use a child selector. if you use a descendant
selector instead, nested submenus at each level will be displayed. A child
selector ensures that only the direct child is affected. Add the following rule to
the style sheet:

#nav li:hover > ul {
display: block;
}

6. save the style sheet, and test the menu in a browser. mouse over list items that

have submenus to verify that they're displayed. Don't worry about the menu
breaking up, as shown in Figure 11-17 . you'll fix that next.

Figure 11-17. The child submenu appears when you hover over its parent list item

7. you need to prevent the list items in the nested lists from floating. Also remove any

margins and padding, and add a top border with the following descendant selector,
which affects all nested lists:

#nav ul li {
float: none;
margin: 0;
padding: 0;
border-top: #CCC 1px solid;
}

8. To display the nested lists in the correct position, you need to make them absolutely

positioned relative to their containing block. setting the left offset to 0 aligns them
to the left edge of the parent list item, and setting the top offset to 40px is the
right amount to position the first-level submenus directly below the main menu. To
prevent the submenu snapping shut prematurely in iE 7, you also need to give it a
background color. Update the #nav ul style rule like this:

#nav ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 40px;