EFFECTS - CSS: Professional Techniques for Modern Layout - page 166

</ li>
< li class="sub"> < a href=" / s2 / ">Section 2</ a>
< ul>
< li> < a href=" / s2 / ss1 / ">Subsection 1</ a> </ li>
< li> < a href=" / s2 / ss2 / ">Subsection 2</ a> </ li>
</ ul>
</ li>
( …and so on…)
</ ul>
168
Figure 5-10: The unhidden submenus.
So far, all normal. Now hide the submenus.
li.sub ul { display : none ;}
h at's it. Of course, you need to bring the submenus back. h e simplest (and least visually
satisfying) way to do that is to say:
li.sub:hover > ul { display : block ;}
h at will just cause the submenus to pop back into place, pushing everything that comes at er
them downward. Add in some positioning, though, and you get them popping up right next
to their parents (as in Figure 5-11) and not altering the rest of the document's layout.
li.sub { position : relative ;}
li.sub:hover > ul { display : block ; position : absolute ; top : 0 ; left : 100% ;
margin : 0 ; background : white ;}