html - 使用 CSS3 过渡导航时意外的 CSS 行为

Question

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

---

问题

当我将导航栏放入我的网站时，它没有按预期工作。下拉动画滞后很多并且页面两侧随机出现白条(Windows 7 Ultimate、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 中运行良好.

编辑:经过更多测试后，我确定问题发生在 width 或 height 的 #nav1 上> li > div 完成。这也肯定与过渡有关。不确定这是否有帮助。

---

我的问题

如果有人能对问题提供一些见解，我们将不胜感激。我完全不知道问题的原因是什么或如何解决。

注意:导航目前仅在 Chrome 中是动画的。

Answer 1

问题是:

#mainbar

摆脱它，看看你的问题是否不会消失。但不仅如此。这包含了 DOM 的整个宽度:

width:100%;

而且它的 z-index 比 #wapper el 更高，它只占用页面的一部分。 #mainbar el 覆盖了#wrapper 没有覆盖的区域。但是因为那里没有任何东西(风格方面)，你会得到浏览器 bg 的默认白色；因此，侧面有白色条。

如果你认为我错了，设置

#mainbar{width:700px;}

您会看到您的白色条已扩展到新的未覆盖区域。 :P

简单的解决方案:

#wrapper{z-index:0;}

这应该可以解决。