好的，开始吧。我知道你正在寻求解决特定问题的方案，我已经解决了它，但我注意到你在苦苦挣扎着。你必须简化你的思考方式，你的代码就会变得更加简洁。这个论坛的目的是帮助其他人变得更好，对吧？ :)
HTML
将菜单切换按钮放在菜单之外是一个好习惯 - 这将解决很多问题 - 请查看下面。
在切换功能中使用除button以外的任何东西都不符合语义，那么为什么不在这里使用button呢？我还从你的代码中删除了一些不必要的混乱，比如一些div和id - id可以与class交换，由你决定。我还删除了.mobile-nav，因为根本不需要它。
<button class="menu-btn">
<span></span>
<span></span>
<span></span>
</button>
<div class="responsive-menu">
<ul id="menu">
<li>Vote</li>
<li>Search</li>
<li>About</li>
<li>Log In</li>
</ul>
</div>
CSS
我将menu-btn绝对定位在右上角，并将其width设置为与#pageTitle的height相等（我将其设置为50px-黄金标准），以保持其矩形形状。应该有一个经验法则，即切换按钮应该是矩形的，并且始终与顶部导航栏具有相同的高度-在这种情况下是前面提到的id。对于.responsive-menu，我也做了同样的事情。如下所示，我将其绝对定位。这些更改使我能够删除许多CSS样式-现在已过时-例如在.responsive-menu内部绝对定位ul菜单。
.menu-btn {
position:absolute;
display:block;
right:0;
top:0;
width:50px;
height:50px;
background:yellow;
border:none;
padding:16px;
}
.responsive-menu {
position: absolute;
top: 50px;
right: 0;
display: none;
}
Javascript
通过多年的实践，我意识到切换菜单最有效的方法不是添加和删除类，而是在 body 标签上添加一个 class；如果您想根据菜单是否打开来重新设计页面上的其他内容，这将非常有帮助。
$('.menu-btn').on('click', function() {
$('body').toggleClass('responsive-menu-open');
});
这里有一个可工作的jsfiddle：https://jsfiddle.net/scooterlord/4atafhge/
为了进一步简化代码，我可以做很多其他事情 - 删除不必要的id和类，因为大多数元素都被认为是唯一的，并且可以使用后代类进行定位，例如.responsive-menu ul等。 经过大量实践，您将能够更简单地思考并生成占用空间更小的代码。
编辑：关于您不喜欢使用绝对像素进行对齐的事实，这里有一个技巧。
给父容器设置固定的height，与切换按钮的高度相同-在本例中为'#pageTitle'，并将其位置设置为relative，允许您使用top:100%来正确地将响应式菜单放置在按钮下方（本质上是相同的高度）：
#pageTitle {
display: flex;
height: 50px;
position:relative;
}
.responsive-menu {
position: absolute;
top: 100%;
right: 0;
display: none;
}
这里是更新后的fiddle: https://jsfiddle.net/scooterlord/4atafhge/1/
编辑：Natalia，我仔细考虑了一下，想到了一个解决方案。我创建了一个绝对定位的.menu-wrapper，里面放置了按钮和响应式菜单，使用float:right而没有定位 - 也就是它们被静态地定位了。不再有像素值！太好了！
.menu-wrapper {
position:absolute;
top:0;
right:0;
}
.menu-btn {
float:right;
...
}
.responsive-menu {
float:right;
clear:both; // to clear the .menu-btn and sit exactly below it
...
}
这里有一个可用的代码片段：https://jsfiddle.net/scooterlord/4atafhge/2/
