html - 标题下方的导航随机颠簸

Question

我不知道这里发生了什么，但是如果你去我正在这里工作的网站 LINK: 54.191.89.210 并刷新几次你会偶尔看到导航将加载到右侧的标题中，有时它会在标题下方创建一个空白区域并加载到下方。 PIC ( http://s11.postimg.org/7aozzs943/Screen_Shot_2014_08_27_at_2_55_38_PM.png ) 这到底是怎么回事？

这是我的标题 HTML

<div class="header">
    <div class="home-menu pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed">
        <a class="pure-menu-heading" href=""><img class="pure-img logo" src="img/logo.svg" width="250px"></a>

        <ul>
            <li><a href="#">Books</a></li>
            <li><a href="#">Speaking</a></li>
            <li><a href="#">About Os</a></li>
            <li><a href="#">Public Statements</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      <div class="cf"></div>
    </div>
</div>

这是CSS

    .pure-menu-fixed {
        position: relative;
    }

    .home-menu.pure-menu.pure-menu-open.pure-menu-horizontal.pure-menu-fixed {
        height: 150px;
        background: #7c0e0e;
    }

    .pure-menu.pure-menu-horizontal>ul li a {
        color: #fff;
        text-transform: uppercase;
        font-size: 1.3em;
        font-weight: 300;
    }

    .pure-menu.pure-menu-horizontal>ul li a:hover {
        background: transparent;
        color: #a18d36;
    }

    .pure-menu.pure-menu-horizontal>ul {
        float: right;
        line-height: 150px;
    }

    .pure-menu.pure-menu-horizontal>ul li:last-child {
        margin-right: 100px;
    }

    .pure-menu.pure-menu-horizontal>ul li:nth-child(n+2)  {
        border-left: 1px solid #fff;
    }

    a.pure-menu-heading {
        line-height: 140px;
    }

    img.logo {
        margin: 23px 0 0 100px;
    }

    .pure-menu li a {
        padding: 5px 40px;
    }

Answer 1

我不知道为什么它是随机的，但是这个文件:

http://54.191.89.210/css/A.style.css.pagespeed.cf.m6uWtqO1vC.css

用 100px 而不是 150px 覆盖了 .home-menu.pure-menu.pure-menu-open.pure-menu-horizo​​ntal.pure-menu-fixed (?!) 的高度，我猜这不是足够的垂直空间来容纳你的 ul 所以它向下移动。

如果你解决了这个问题，也许你就不会再遇到这个问题了。