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

So, pop-ups. All you need to do is i rst suppress the appearance of the i elements, and then
reveal each one as its parent link is hovered (see Figure 5-8).

ul.toc li { position : relative ;}
ul.toc li a i { display : none ;}
ul.toc li a:hover i { display : block ; width : 6em ;
position : absolute ; top : 0 ; left : 100% ;
margin : -1em 0 0 1em ; padding : 1em ;
background : #CDE ; border : 1px solid gray ;}

Figure 5-8: Pop-up text next to links.

166 Ta-da! Little pop-ups. h ey're positioned with respect to their containing li elements

because of the position: relative in the i rst line of CSS shown. If you wanted to place
them with respect to the whole set of links, you'd just shit the relative positioning to the ul
itself and adjust placement of the pop-ups accordingly. For example, you could put them
underneath the last of the links in the list, as in Figure 5-9.

ul.toc { position : relative ;}
ul.toc li a i { display : none ;}
ul.toc li a:hover i { display : block ; width : 6em ;
position : absolute ; top : 100% ; right : 0 ;
margin : 1em 0 0 ; padding : 1em ;
background : #CDE ; border : 1px solid gray ;}