HTML and CSS Reference
In-Depth Information
Figure 11-16. The submenus are links in nested unordered lists
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;
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;
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;
Search WWH ::

Custom Search