HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [121]
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Some of my favorite links
- Social networking
- Reference
- Web development
- XHTML/CSS
- Programming
Take special care with your indentation when making a complex nested list like this one. Without proper indentation, it becomes very difficult to establish the structure of the page. Also, a list item can contain text and another list. Any other arrangement (putting text between list items, for example) will cause a validation error and big headaches when you try to apply CSS.
Hiding the inner lists
The first step of creating a dynamic menu system is to hide any lists that are embedded in a list item. Add the following CSS style to your page:
li ul {
display: none;
}
In reality, you usually apply this technique only to a specially marked div, like a menu system. Don’t worry about that for now. Later in this chapter, I show you how to combine this technique with a variation of the button technique for complex menu systems.
Your page will undergo a startling transformation, as shown in Figure 3-4.
Figure 3-4: Where did everything go?
That tiny little snippet of CSS code is a real powerhouse. It does some fascinating things, such as
♦ Operating on unordered lists that appear inside list items: What this really means is the topmost list won’t be affected, but any unordered list that appears inside a list item will have the style applied.
♦ Using display: none to make text disappear: Setting the display attribute to none tells the XHTML page to hide the given data altogether.
This code works well on almost all browsers. It’s pretty easy to make text disappear. Unfortunately, it’s a little trickier to make all the browsers bring it back.
Getting the inner lists to appear on cue
The fun part is getting the interior lists to pop up when the mouse is over the parent element. A second CSS style can make this happen:
li ul {
display: none;
}
li:hover ul {
display: block;
}
The new code is pretty interesting. When the page initially loads, it appears the same as what’s shown in Figure 3-4, but see the effect of holding the mouse over the Social Networking element in Figure 3-5.
Figure 3-5: Holding the mouse over a list item causes its children to appear.
This code doesn’t work on all browsers! Internet Explorer 6 (IE6) and earlier versions don’t support the :hover pseudo-class on any element except a. Provide a conditional comment with an alternative style for early versions of IE. All modern browsers (including IE 7 and 8) work fine.
Here’s how the list-reappearing code works:
♦ All lists inside lists are hidden. The first style rule hides any list that’s inside a list element.
♦ li:hover refers to a list item that’s being hovered on. That is, if the mouse is situated on top of a list item, this rule pertains to it.
♦ li:hover ul refers to an unordered list inside a hovered