2

我设计了一个带有 5 个宽度相等的页面“链接”的导航栏。当悬停在这些上时，会显示一个下拉菜单，其中包含与该页面相关的更多链接。请参阅导航 jsFiddle。这完美地工作。

问题

当我将导航栏放入我的网站时，它无法按预期工作。下拉动画滞后很多，页面两侧随机出现白条（Windows 7 Ultimate、Chrome 24、其他操作系统和浏览器未经测试）。请参阅此处的网站。

白条

奇怪的白条

示例标记

<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，看看是否能找出问题所在。令我惊讶的是，它在jsFiddle中运行良好。

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

我的问题

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

注意：导航目前仅在 Chrome 中具有动画效果。

4

1 回答 1

0

问题是：

#mainbar

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

width:100%;

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

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

#mainbar{width:700px;}

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

简单的解决方案：

#wrapper{z-index:0;}

那应该解决它。

于 2013-02-25T06:51:19.197 回答