Html 使绝对元素占据浏览器窗口的100%宽度，并移动下面的内容

html

问题是，当宽度低于

500px时，我想显示如下元素：

我需要显示那些与页面内容相关的元素，这些元素将向下移动下面的内容，并使元素占据整个页面的宽度，比如
width:100%
。有点困在那里需要你的帮助。谢谢

请将此移到JSFIDLE，以便我们可以看到它的实际效果/调整它。@BotskoNet我已经介绍了我迄今为止所取得的成就。我真的不清楚问题是什么，目标是什么。你指的是宽度，但我不知道你指的是什么元素。给我一个你现在拥有的，与你想要的，以及你尝试过的相比的想法。绝对定位将一个元素从流程中移除，因此它不能向下推动以下内容。我想我通过宽度得到了你想要的。。。在使用这样的定位时，让元素的宽度始终对齐是很棘手的，但这是否适用于：
<div id="navBar">
    <ul>
        <li>
            <a href="">z</a>
            <ul>
                <li><a href="">WORKS</a></li>
                <li><a href="">ARTICLES</a></li>
                <li><a href="">ABOUT</a></li>
            </ul>
        </li>
        <li>
            <a href="">u</a>
            <ul>
                <li><a href="">About Us</a></li>
                <li><a href="">Advertise</a></li>
                <li><a href="">Sources</a></li>
            </ul>
        </li>
        <li><a href="">s</li>
    </ul>
    <div style="clear: both;"></div>
</div>

#navBar{
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    background-color: #0088FF;
}
#navBar ul{
    float: right;
}
#navBar ul li{
    float: left;
    padding: 0 16px 0 16px;
}
#navBar ul li a{

}


/*-------Media Queries---------*/    
    @media only screen
            and (max-width : 500px) {
            #navBar ul li ul{
                display: none;
            }
            #navBar ul li{
                position: relative;
            }
            #navBar ul li:hover > ul{
                display: block;
                position: absolute;
                background-color: #FFFFFF;
            }
    }