多个CSS悬停弹出窗口能否在单个div中占据相同的空间？

我试图在悬停伪类中为菜单（列表项）中的不同行弹出文本跨度。如果菜单/列表是水平的，我可以让弹出窗口占据div中相同的空间，但是垂直列表将弹出窗口放置在与“父”列表/菜单项相同的垂直高度

以下是迄今为止我掌握的相关代码：

<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{
列表样式：外部的光盘url（w-arrow.png）；
}
#美元{
位置：相对位置；
顶部：0em；
宽度：800px；
高度：250px；
背景色：#7EBB11；
边框：3px实心#112D82；
}
/*********服务列表菜单**********/
.serviceframe{
位置：相对位置；
宽度：100%；
身高：94%；
背景色：#666666；
顶部：3%；底部：3%；
}
/*--serviceframe现在是美元--*/
.服务列表{
位置：相对位置；
宽度：100%；
身高：90%；
最高：1%；
背景色：#7EBB11；
字体系列：Optima、Calibri、Candara、世纪哥特式、，
Arial，无衬线；
字体大小：100%；
颜色：黑色；
显示：表格单元格；
垂直对齐：中间对齐；
z指数：100；
}
.服务列表a
{位置：相对位置；
显示：表格单元格；文本对齐：左侧；高度：100%；字体：1em无衬线；
文字装饰：无；颜色：#112D82；
背景：7EBB11；
}
/*悬停时项目的外观（但在标记之前）*/
.服务列表a：悬停{
颜色：白色；
}
/*不悬停时标记内跨区内容的外观*/
.services列出span{display:none；}
/*悬停时标记内跨区内容的外观*/
.服务列表a：悬停范围{
位置：绝对位置；
显示：表格单元格；
顶部边距：0em；左侧边距：-50%；z指数：100；
宽度：40%；高度：自动；颜色：FFFFFF；背景色：7EBB11；
字体：14px Verdana，无衬线；文本对齐：左；
}

那么您希望所有不同的跨距显示在同一位置？ 在中设置相对位置，使跨距看起来与其“相对”

修正：

• 删除中的相对定位 锚定尽管如此，这似乎并不重要 因为某种原因
• 设置定位（顶部、左侧等） 范围到所需的值

---

*你的代码片段在IE6/7上不起作用，所以我没有去理会其中的bug。

我的天，对于一个简单的任务来说，这是一大堆HTML和css。我不想把它通读一遍，只想给你答案

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

ul{位置：相对；}
ul span{位置：绝对；}

你只需要在ul上有相对位置（或上面的一个div），因为这就是你想要让你的跨距绝对到的位置

---

另外，杀死你的LIs周围的p标签。UL和LI之间不应该有任何内容。

请重新格式化代码好吗？现在很难阅读（将每个代码行缩进四个空格，以便在stackoverflow上阅读）。我为他/她编辑了格式，我们都为他编辑了格式…：Dthank you-首次用户问题；）谢谢，它似乎没有任何区别（至少在FF中），但我会在其他人身上尝试。P标签只是为了给我一些节奏感，不会影响结果，但我还是把它们去掉了。干杯，帕特里克。@patrick-为了保持简单，我从中剥离了很多css，但是在具有左上角声明的位置中使用相对位置和绝对位置肯定会起作用。非常感谢，将a:悬停条件作为定义位置的条件非常有效。这是我第一次使用CSS，所以我边走边学。我想先在FF/Sf中把它做好，然后在IE中修复它（这样我就可以先实现一件事！）——一个好的方法还是没有？干杯，帕特里克。这是一种常见的方法，因为IE6非常古怪。我相信高度百分比的使用，会让你的代码片段在IE中变得很糟糕。

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