Question

I’m trying to have text spans pop up on a hover pseudo-class for different lines in a menu (list items). I can have the pop-ups occupy the same space in the div if the menu/list is horizontal, but a vertical list places the popups at the same vertical height as the ‘parent’ list/menu item.

Here is the relevant code I have so far:

<div id='greenback'>   <div class='serviceframe'>     <div class='serviceslist'> <ul> <li><a href=''>item 1<span>this is popup1.</span></a></li>  <p><li><a href=''>item 2<span>This is popup 2's text but I want it to appear in exactly the same place as popup 1's text does.</span></a></li></p>  <p><li><a href=''>item 3<span>same here - how can I get all popups positioned in exactly the same place?</span></a></li></p> </ul>         </div><!-- closes serviceslist-->     </div><!-- closes serviceframe --> </div><!-- closes greenback--> 

CSS:

ul {     list-style: disc url(w-arrow.png) outside;     }    #greenback {     position: relative ;         top: 0em ;     width: 800px ;     height: 250px ;     background-color: #7EBB11 ;     border: 3px solid #112D82 ;     }  /*********SERVICE LIST MENU**********/ .serviceframe {      position: relative ;     width: 100% ;     height: 94% ;      background-color: #666666 ;      top: 3%; bottom: 3%;     } /*--serviceframe is now sitting in greenback--*/  .serviceslist {     position: relative ;     width: 100% ;     height: 90%  ;     top: 1% ;     background-color: #7EBB11 ;     font-family: Optima, Calibri, Candara, Century-Gothic,      Arial, sans-serif;     font-size: 100% ;     color: black ;     display: table-cell ;     vertical-align: middle ;     z-index: 100 ; }  .serviceslist a      {position: relative;     display: table-cell; text-align: left; height: 100%;  font: 1em sans-serif;      text-decoration: none; color: #112D82;      background: #7EBB11 ;  }  /*appearance of the <a> item (but before the <span> tag) on hover*/ .serviceslist a:hover {     color: white;     }  /*appearance of the spanned content within <a></a> tags when not hovered*/ .serviceslist a span {display: none;}  /*appearance of spanned content within <a> tags when hovered*/ .serviceslist a:hover span {     position: absolute;     display: table-cell;       margin-top: 0em; margin-left: -50%; z-index: 100;     width: 40%; height: auto; color: #FFFFFF;  background-color: #7EBB11;     font: 14px Verdana, sans-serif; text-align: left;     } 

Answer 1

My my, that’s a whole lot of HTML and css for a simple task. I wont try to read through it all, but just give you your answer

<ul>   <li><a href=''>item 1<span>this is popup1.</span></a></li>   <li><a href=''>item 2<span>This is popup 2's text but I want it to appear in exactly the same place as popup 1's text does.</span></a></li>   <li><a href=''>item 3<span>same here - how can I get all popups positioned in exactly the same place?</span></a></li> </ul>  ul { position: relative; } ul span { position: absolute; } 

You only need to have position relative on the ul (or one of the divs above it) because that’s what you’re wanting to make your spans absolute to.

Also, kill those P tags around your LIs. You shouldn’t have anything between the UL and LI.