使用CSS3过渡导航时出现意外的CSS行为

Question

我设计了一个导航栏，其中有5页“链接”，宽度相等。当悬停在这些上方时，会显示一个下拉列表，其中包含与该页面相关的更多链接。 See the navigation jsFiddle。这非常有效。

---

问题

当我将导航栏放入我的网站时，它无法按预期工作。下拉动画滞后很多并且白条随机出现在页面的两侧（Windows 7旗舰版，Chrome 24，其他操作系统和浏览器未经测试） ）。 See the site here

---

白条

---

示例标记

<nav id="nav">
    <ul id="nav1">
        <li> 
        <span>Games</span>
            <div>   
                <span><a href="">All Games</a></span>
                <span><a href="">Free Games</a></span>
                ...
            </div>
        </li>
        ...
    </ul>
</nav>

动画CSS

#nav1 > li > div {
    position: absolute;
    margin: 5px 0 5px -45px;
    top: 0;
    left: 50%;
    max-height: 30px;
    width: 90px;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: 
        width 500ms, 
        max-height 500ms, 
        opacity 200ms ease 400ms, 
        margin-left 500ms;
}
#nav1 > li:hover > div {
    max-height: 200px;
    width: 200px;
    opacity: 1;
    margin-left: -100px;
    -webkit-transition: 
        width 500ms, 
        max-height 1s ease 500ms,
        opacity 200ms, 
        margin-left 500ms;
}

---

我尝试了什么

在花了一个小时寻找问题失败后，我决定在我的整个网站上制作一个jsFiddle来查看是否能识别出问题。令我惊讶的是它在the jsFiddle中工作正常。

修改：经过更多测试后，我确定在#nav1 > li > div的宽度或高度上进行转换时会出现问题完成。它也肯定与过渡有关。不确定这是否有帮助。

---

我的问题

如果有人能够对这个问题提供一些见解，那将非常感激。我完全不知道问题的原因是什么或如何解决它。

注意：导航目前仅在Chrome中设置动画。

Answer 1

问题是：

#mainbar

摆脱它，看看你的问题是否不会消失。但它不止于此。这包含DOM的整个宽度：

width:100%;

它具有比#wapper el更高的z-index，它只占用了页面的一部分。 #mainbar el覆盖了#wrapper所在区域的区域。但是因为没有任何东西（风格方面）你得到浏览器的默认白色bg;因此，侧面的白色条纹。

如果您认为我错了，请设置

#mainbar{width:700px;}

你会看到你的白条已扩展到新的未覆盖区域。 ：P

简单的解决方案：

#wrapper{z-index:0;}

那应该解决它。