HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [123]
#menu li:hover > ul {
display: block;
margin-left: -2em;
}
Of course, the CSS uses a few tricks, but there’s really nothing new. It’s just a combination of techniques you already know:
1. Un-indent the entire list by setting the ul’s margin-left to a negative value to compensate for the typical indentation. 2.5em is about the right amount.
Because you’re removing the list-style types, the normal indentation of list items will become a problem.
2. Format the li tags.
Each li tag inside the menu structure should look something like a button. Use CSS to accomplish this task:
/* set li as buttons */
#menu li {
list-style-type: none;
border: 1px black solid;;
width: 10em;
background-color: #cccccc;
text-align: center;
}
a. Set list-style-type to none.
b. Set a border with the border attribute.
c. Center the text by setting text-align to center.
d. Add a background color or image, or you’ll get some strange border bleed-through later when the buttons overlap.
3. Format the anchors as follows:
/* display anchors as buttons */
#menu a {
color: black;
text-decoration: none;
display: block;
}
a. Take out the underline with text-decoration: none.
b. Give the anchor a consistent color.
c. Set display to block (so the entire area will be clickable, not just the text).
4. Give some indication it’s an anchor by changing the background when the user hovers on the element:
/* flash white on anchor hover */
#menu a:hover {
background-color: white;
}
Because the anchors no longer look like anchors, you have to do something else to indicate there’s something special about these elements. When the user moves the mouse over any anchor tag in the menu div, that anchor’s background color will switch to white.
5. Collapse the menus using the hidden menus trick (discussed in the section “Hiding the inner lists,” earlier in this chapter) to hide all the sublists:
/* collapse menus *#menu li ul {
display: none;
}
6. Display the hidden menus when the mouse hovers on the parent element by adding the code described in the “Getting the inner lists to appear on cue” section:
/* show submenus on hover */
#menu li:hover > ul {
display: block;
margin-left: -2em;
}
This trick won’t work on IE6 or earlier versions. You have to provide an alternate style sheet (with conditional commenting) or a JavaScript technique for these earlier browsers.
Building a horizontal menu
You can make a variation of the menu structure that will work along the top of a page. Figure 3-11 shows how this might look.
The submenus come straight down from their parent elements. I find a little bit of indentation helpful for deeply nested lists, as shown in Figure 3-12.
Again, the HTML is identical. The CSS for a horizontal menu is surprisingly close to the vertical menu. The primary difference is floating the list items:
/* vertMenu.css */
/* unindent each unordered list */
#menu ul {
margin-left: -2.5em;
}
/* turn each list item into a solid gray block */
#menu li {
list-style-type: none;
border: black solid 1px;
float: left;
width: 10em;
background-color: #CCCCCC;
text-align: center;
}
/* set anchors to act like buttons */
#menu a {
display: block;
color: black;
text-decoration: none;
}
/* flash anchor white when hovered */
#menu a:hover {
background-color: white;
}
/* collapse nested lists */
#menu li ul {
display: none;
}
/* display sublists on hover */
#menu li:hover > ul {
display: block;
}
/* indent third-generation lists */
#menu li li li{
margin-left: 1em;
}
Figure 3-11: The same list is now a horizontal menu.
Figure 3-12: For the multilevel menus, a little bit of indentation is helpful.
The CSS code has just a few variations from the vertical menu CSS:
♦ Float each list item by adding float and width attributes.
/* turn each list item into a solid gray