jquery - 我的移动汉堡包与其他子菜单项重叠

Question

一旦我点击一个元素，我的移动汉堡菜单就会与所有其他元素重叠。
因此无法看到或点击所有其他元素。
我该如何解决这个问题？

我的站点(在移动 View 中使用):http://sstromberg.saldev.nl/index.html

图片更清晰:

之前:https://imgur.com/a/NOr6W 之后:https://imgur.com/a/DWnle

点击“CV”后，“Portfolio”和“Overig”就消失了。

我的 HTML/CSS 和 JQuery 代码:

$(document).ready(function() {
  $('.icon').on('click', function() {
    $("#menu").slideToggle();
  });
});

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .bar1,
  .bar2,
  .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
  }
  .icon {
    width: 35px;
    margin: auto;
  }
  ul#menu>li {
    width: 100%;
    display: block;
  }
  ul#menu>li>ul.submenu {
    display: none;
  }
  ul#menu>li:hover>ul.submenu {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #f3f3f3;
  }
  ul#menu a:hover {
    transform: scale(1.1);
  }
  ul#menu {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: sans-serif;
    background-color: #f3f3f3;
  }
  ul#menu a {
    display: block;
    padding: 1em;
    /* met 1em word de ruimte tussen de list items 2x zo groot */
    font-family: sans-serif;
    color: #FF4136;
    text-decoration-line: none;
    font-weight: bold;
  }
  .submenu {
    left: -50%;
    right: -50%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger-menu">
  <div class="icon">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <ul id="menu">
    <li><a href="index.html">Home</a></li>
    <li>
      <a>CV</a>
      <ul class="submenu">
        <li><a href="pgegevens.html">Persoonlijke Gegevens</a></li>
        <li><a href="werkervaring.html">Werkervaring</a></li>
        <li><a href="opleiding.html">Opleiding</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

将 position: relative; 而不是 position: absolute; 添加到 ul#menu > li:hover > ul.submenu 并删除 左:-50%； right: -50%; from .submenu 应该就可以了。当子菜单是绝对位置时，它不占用空间并越过下面的菜单，但相对位置时，它会占用空间并移动其他菜单项。确保在仅针对移动菜单的媒体查询中执行此操作，因为桌面菜单需要子菜单上的 position: absolute;。