我认为我对问题的理解足以提供解决方案。
绝对定位元素和浮动元素可以重叠。当点击 ☰ 时，元素被赋予float: right，这也将赋予元素display: block；这意味着它占用了100% 的宽度并将整个垂直导航向左推向徽标。另一个问题出现在#logo 呈现在菜单顶部（这里的z-index 不起作用），因此☰ 不再看到 click 由于另一个元素呈现在顶部。
z-index 无法正常工作，因为定位元素会创建新的堆叠上下文 - 请参阅 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ 了解更多信息。
此处不需要 CSS float，可以将其替换为 inline-block 或 table-cell 显示值。我还在演示中删除了z-index。
最后，我更改了$(window).resize() 计算以删除与@media 查询宽度相同的垂直导航 类，因为以前的垂直菜单可以使用宽度为100px在变成水平的之前消失。
更新答案（基于请求的design）
使用添加的信息，此解决方案可以更加简洁，我还可以从原始答案中删除display: table-cell（留在下方）。
Updated demo
HTML
<div id="header">
<div id="logo">
<p>LOGO HERE</p>
<span id="menu">☰</span>
</div>
<ul id="nav">
<li id="homeBtn"><a href="index.php"><span id="homeBtnImg"></span></a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
CSS
#header {
background-color: #f06060;
padding: 52px 0px;
}
#logo {
display:inline-block;
width: 348px;
height: 57px;
border:1px dotted black;
position:relative;
}
#menu {
position: absolute;
right: 0;
top: 15px;
display:none;
}
#nav {
list-style: none;
padding: 0;
display: inline-block;
}
#nav.vertical {
display: block;
padding-left: 20px;
}
#nav.vertical li {
display: list-item;
line-height: 40px;
}
#nav li {
display:inline-block;
padding-right: 40px;
}
#nav li:last-child {
padding-right: 0;
}
@media screen and (max-width: 800px) {
#menu {
display: inline-block;
}
#nav {
display: none;
}
}
JavaScript
与下面的原始答案相同。
原答案
请参阅this demo 或下面的代码。
HTML
<div id="header">
<div id="wrap">
<div id="logo">
<p>LOGO HERE</p>
</div>
<div id="menu_wrapper">
<div id="menu">☰</div>
<ul id="nav">
<li id="homeBtn"><a href="index.php"><span id="homeBtnImg"></span></a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</div>
CSS
#header {
background-color: #f06060;
padding: 52px 0px;
display:table;
width:100%;
}
#wrap {
display:table-row;
}
#logo {
display:table-cell;
width: 338px;
height: 57px;
}
#menu {
display:none;
}
#menu_wrapper {
display:table-cell;
text-align:right;
padding-right:5px;
}
#nav {
list-style: none;
padding: 0;
text-align: left;
}
#nav.vertical {
display: block;
}
#nav.vertical li {
display: list-item;
line-height: 40px;
}
#nav li {
display:inline-block;
padding-right: 40px;
}
#nav li:last-child {
padding-right: 0;
}
@media screen and (max-width: 800px) {
#menu {
display: block;
}
#nav {
display: none;
}
}
JavaScript
$(window).resize(function(){
if (window.innerWidth > 800) {
$("#nav").removeClass('vertical');
}
});
$("#menu").click(function(){
$("#nav").toggleClass('vertical');
return false;
});