我已经检查了这个大约两天了。
例子
这是一个相当复杂的设计，所以为了减少粘贴在这里的代码，我在这个 jsfiddle 上重新创建了主要结构，并在这篇文章的末尾包含了简化的代码：
http://jsfiddle.net/rwone/zwxpG/10/
设想
我有一个容器，<li>其中包含多个 div（包含来自数据库的动态内容），最初具有属性 display: none。
然而，在将鼠标悬停在这些图像上<li>时，我希望显示 div。
它正在工作，但是 div 似乎位于容器中具有固定高度和溢出-y：auto 的其他元素下方。
我试过的
我已经尝试过 z-index 以及绝对和相对定位的组合，但我还没有找到解决方案。
我在下面的代码和 jsfiddle（显示为/* comments */）中隔离了两个原因，但这些在实时测试站点上不起作用。
问题
因此，我的问题是，是否有另一种方法可以强制将悬停状态 div 显示在包含它的容器的顶部和外部？
这不是一个理想的解决方案，我可以在 jsfiddle 但不能在实时站点中解决这些问题，但我只是想问是否有另一种方法可以完全解决这个问题？
谢谢你。
html
<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<ul>
<li>
hover me #1
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
<li>
hover me #2
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
</ul>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>
css
#wrapper {
width: 300px;
}
#hbar_one {
background: #cc0000;
height: 50px;
}
#hbar_two {
background: #ffcc00;
height: 50px;
}
#container_b {
height: 50px;
/* cause one - on its own, this causes the undesired 'underneath' effect */
overflow-y: auto;
}
ul li {
display: inline;
/* cause two - on its own, this causes the undesired 'underneath' effect */
position: relative;
}
#container_c {
display: none;
}
ul li:hover #container_c {
background: #00AFF0;
display: block;
width: 200px;
height: 200px;
position:absolute;
top: -20px;
left: 50px;
z-index: 999;
overflow: hidden;
}
#hbar_three {
background: #cccccc;
height: 50px;
}
#hbar_four {
background: #000000;
height: 50px;
}
更新
作为对下面答案的回应，这里是有关悬停时显示的实际内容的更多信息（#container_cdiv 中的所有内容）。每个<li>都有自己独特的内容：
<li class=".class1 .class2">
<img src="http://path/to/image.jpg">
<div id="container_c">
<h4>title</h4>
<div id="container_c_left">
<span id="cl1">text</span>
<span id="cl2">text</span>
<span id="cl3">text</span>
</div>
<div id="container_c_right">
<span id="cr1">text</span>
<span id="cr2">text</span>
</div>
<span id="cc1">text</span>
<span id="cc2"><a class= "linkclass" href="http://path/to/link.html">link</a></span>
</div>
</li>