响应式菜单汉堡图标展开菜单项重叠定位问题求解

几个CSS写法错误共同导致了布局异常：

• 全局ul选择器添加了带!important的默认边距、列表圆点样式，强制覆盖了导航菜单的ul布局，导致菜单初始位置就有偏移
• 移动端展开状态的菜单项只设置了top: 100px，但没有声明定位属性，top/right这类偏移属性对默认静态定位的元素完全无效，菜单项不会向下移动
• 汉堡图标相关的偏移属性没有搭配对应的position声明，位置本身就不符合预期，展开时还设置了z-index: -1，会把图标压到菜单背景下方
• 展开状态的菜单容器没有设置正确的定位参照，也没有预留内容展示空间，菜单项会直接溢出容器，和顶部导航栏、汉堡图标堆在一起

HTML结构不需要改动，直接替换原有CSS即可：

/*  ----------------- NAVIGATION ----------------- */
.header_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  background-color: #fffef9f7;
  height: 75px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

/* 单独重置导航内ul样式，覆盖全局ul的!important默认样式 */
.header_nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header_nav a {
  list-style: none;
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 28px;
  text-transform: uppercase;
}

/* 注意：不建议写带!important的全局ul样式，会污染所有组件的列表布局
如果要保留默认正文列表样式，建议把选择器改成正文容器对应的类，比如.post-content ul，不要直接用ul作为选择器
ul {
  display: block !important;
  list-style-type: disc !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  margin-inline-start: 0px !important;
  margin-inline-end: 0px !important;
  padding-inline-start: 40px !important;
}
*/

.header_nav a:hover {
  color: #78F51D;
}

.logo {
  padding-left: 5%;
}

.logo img {
  max-height: 45px;
  vertical-align: middle;
}

.menu {
  padding-right: 5%;
  position: relative;
}

.menu li {
  padding-left: 20px;
}

.menu .icon {
  display: none;
}

li .icon {
  padding-right: 0px;
}

li {
  padding-left: 12px;
  display: inline-block;
}

/*  ----------------- MEDIA QUERIES ----------------- */
@media only screen and (max-width: 640px) {
  .menu ul li:not(.icon) {display: none;}
  .menu ul li.icon {
    display: block;
  }
  .menu.responsive {
    background-color:#FFFEF9;
    position: absolute;
    top: 75px;
    right: 0;
    width: 100%;
    padding: 10px 5%;
    box-sizing: border-box;
  }
  .menu.responsive .icon {
    position: absolute;
    right: 5%;
    top: -50px;
  }
  .menu.responsive ul li:not(.icon) {
    float: none;
    display: block;
    padding: 12px 0;
    text-align: right;
  }
}

• 导航栏改用flex布局，天然支持logo居左、菜单居右的对齐效果，不需要再用浮动、inline-table这类容易出兼容问题的写法
• 给导航内的ul单独加了样式重置，抵消全局ul!important规则的影响
• 移动端展开的菜单改为绝对定位，直接从75px高的导航栏下方开始渲染，从根源避免和导航、汉堡图标重叠
• 修正了汉堡图标的定位逻辑，展开后仍然固定在右上角原来的位置，不会被菜单内容压住
• 移除了所有无效的定位偏移属性，静态定位元素不再设置无意义的top/right值

内容的提问来源于stack exchange，提问作者user19553015