Can multiple CSS hover popups occupy the same space within a single div?

Question

Hi, 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.

Any ideas - please!

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;
    }

Any ideas gratefully received!

Answer 1

So you want all the different spans to be appeared in the same place? You set the relative position in A, which make the span appear "relative" to it.

Fix:

• Remove relative positioning in anchor. // Though, it doesn't seem to matter in FF for some reason
• Set positioning(top, left, etc.) for span to desired value.

*Your code snippet doesn't work on IE6/7 so I didn't bother the bugs in it.

Answer 2

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.