如何防止元素在窗口大小调整时失去位置

Question

我正在构建一个响应式导航，此时仅使用html和scss;但我遇到了一个错误。当我将窗口从600px宽度调整到更小时，媒体查询生效，布局按预期更改。

但是，当我将宽度增加到600px以上时，<nav class="secondary_navigation">会低于原始位置 - 显示在标题下方。有时<a href="#" class="cta">会做同样的事情，但却不一致。

此功能仅在Chrome上测试过。

<header>
    <h1>Logo</h1>
    <nav class="product_categories">
        <ul>
            <li><a href="#"><span>Product One</span></a></li>
            <li><a href="#"><span>Product Two</span></a></li>
        </ul>
    </nav>
    <a href="#" class="cta">Call To Action</a>
    <nav class="secondary_navigation">
        <ul>
            <li><a href="#">Page One</a></li>
            <li><a href="#">Page Two</a></li>
            <li><a href="#">Page Three</a></li>
        </ul>
    </nav>
</header>

（相当冗长）的scss：

// MEDIA QUERIES
   $mq-600 : 'screen and (max-width: 600px)';

// DIMENSIONS
   $head-height : 50px;

// COLOURS
   $cta : #bada55;

header{
    background-color: rgba(0,255,255,0.75);
    position: relative;
    width: 100%;
    ul{
        box-sizing: border-box;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    li{
        display: inline-block;
        height: $head-height;
        line-height: $head-height;
        margin: 0;
        padding: 0;
        a{
            padding: 0 10px;
        }
    }
    .product_categories{
        background-color: #fff;
        display: inline-block;
        height: 50px;
        @media #{$mq-600} {
            display: block;
            height: auto;
            li{
                background-color: #d3e1e5;
                float: left;
                height: 100%;
                position: relative;
                width: 50%;
                a{
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    span{
                        position: absolute;
                        bottom: 0;
                    }
                }
                &:before{
                    content:'';
                    display: block;
                    padding-top: 100%;
                }
            }
        }
    }
    .cta{
        border: 0;
        background-color: $cta;
        display: inline-block;
        float: right;
        line-height: 30px;
        margin: 10px;
        padding: 0 10px;
        @media #{$mq-600} {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
    .secondary_navigation{
        background-color: #fff;
        display: inline-block;
        height: 50px;
        float: right;
        @media #{$mq-600} {
            display: block;
            float: none;
        }
    }
}

h1{
    display: inline-block;
    height: $head-height;
    line-height: $head-height;
    padding: 0 10px;
}

那么如何让第二个导航回弹到它应该的位置呢？

这是fiddle。

按要求提供的图片：

这是正确的：

但是当我缩小页面并重新展开时，会发生这种情况：

Answer 1

这是更新的小提琴：http://jsfiddle.net/fw009x2z/3/

我对你做了一些小改动： 改变

display: block;

到

width: 100%;

出于某种原因，某些浏览器不赞同将其切换为block。