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

Question

HTML

<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>

CSS

#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;
            }
    }

问题是，当宽度低于500px时，我想显示如下所示的元素：

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

new jsFiddle