HTML and CSS Reference
In-Depth Information
Figure 11-16.
The submenus are links in nested unordered lists
2.
Begin styling the menu by removing the bullets and margins from the list items
and floating them left. This is the same technique as used in Chapter 10. However,
add some padding to the bottom of the list items to prevent a submenu from
snapping shut as you move the cursor from the top-level menu. Also set the list
items'
position
to
relative
to create containing blocks for the submenus. Add the
following style rule to the style sheet:
#nav li {
list-style-type: none;
margin: 0;
padding-bottom: 20px;
float: left;
position: relative;
}
3.
next style all the links by setting their
display
property to
block
, giving them a
background color, and formatting the text like this:
#nav a {
display: block;
padding: 10px 20px;
margin: 0;
border-left: #CCC 1px solid;
color: #e7e5e5;
background-color: #736C56;
font-weight: bold;
text-decoration: none;
}
4.
Hide all the nested lists by setting their
display
property to
none
. i'll explain later
why i'm using this technique rather than moving them offscreen. Use a descendant
selector to target all nested lists:
#nav ul {
display: none;
}
