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

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