将绝对位置元素对齐并保持响应

Question

HTML

<div id="navBar">
    <div class="navBarStyles">
        <ul class="navBarInfo">
            <li><a href="#" class="i-icon iconStyles">u</a>
            <div style="clear:both"></div>
                <ul>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Sources</a></li>
                    <li><a href="#">Advertise</a></li>
                </ul>
            </li>
        </ul>
        <ul class="mainNavBar">
            <li><a href="#" class="menu-icon iconStyles">z</a>
                <ul>
                    <li><a href="#">WORKS</a></li>
                    <li><a href="#">ARTICLES</a></li>
                    <li><a href="#">ABOUT</a></li>
                </ul>
            </li>
        </ul>       
        <div style="clear: both"> </div>
    </div>
</div>

CSS

li{
    list-style: none;
}
#navBar{
    position: relative;
    background-color: #0088FF;
    color: #FFFFFF;
}

@media only screen
        and (max-width : 500px) {
            #navBar .menu-icon{
                position: absolute;
                top: 0px;
            }
            #navBar .i-icon{
                float: right;
            }
            #navBar .navBarStyles{
                position: relative;
            }
            #navBar .navBarStyles li ul{
                background-color: #FFFFFF;
                display: block;
                margin: 0;
                width: 100%;
            }
            #navBar .navBarStyles li ul li{
                display: inline-block;
                margin-left: -4.08px;
                width: 33.333333333333333333333333333333%;
            }
            #navBar .navBarStyles li ul li a{
                display: block;
            }
            #navBar .navBarStyles li ul{
                display: none;
            }
        }

请注意我，因为我已经为一个小问题包含了一些长代码（只是为了更好地修改），我想要做的是将z移到右边的位置是在左侧u。类似于下面的截图。

问题在于标记，因为列表项位于这两个按钮（z & u）下面，因此下面列出的链接显示在链接点击时。我已经通过更改标记尝试了float: right元素。但仍然是同样的问题。我希望下面的列表显示为现在点击时只想更改z按钮的位置。谢谢你的帮助！

jsFiddle

应如何显示以下元素

---

Answer 1

也许是这样的：

#navBar .navBarInfo {
    display: inline-block;
    float:left;
}
#navBar .mainNavBar {
    display: inline-block;
    float:right;
}

Jsfiddle link

[编辑]

以下是评论中要求/解释的更新版本：

JSFIDDLE