小编Luk*_*kas的帖子

如何使用CSS <div>在另一个内部水平居中<div>？

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

我有这么简单的代码:

<div class="div1">
  <div class="div2">Foo</div>
  <div class="div3">
    <div class="div4">
      <div class="div5">
        Bar
      </div>        
    </div>
  </div>
</div>

这个CSS:

.div1{
  position: relative;
}
.div1 .div3 {
  position: absolute;
  top: 30px;
  left: 0px;
  width: 250px;
  display: none;
}
.div1:hover .div3 {
  display: block;
}
.div2{
  width: 200px;
  height: 30px;
  background: red;
}
.div4 {
  background-color: green;
  color: #000;  
}
.div5 {}

问题是:当我将光标移动.div2到.div3(.div3应该保持可见,因为它是孩子的.div1)时,将禁用悬停.我在IE7中测试它,在FF中工作正常.我究竟做错了什么？我也意识到,当我删除.div5标签而不是它正在工作时.有任何想法吗？