Question

点击一个项目后，我的移动汉堡包菜单会重叠所有其他项目。
由于这个原因，无法看到或点击所有其他项目。
如何解决此问题？

我的网站（在移动视图中使用）：http://sstromberg.saldev.nl/index.html

图片使其更清晰：

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

点击“简历”后，

'投资组合'和'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，然后从left: -50%; right: -50%;中移除.submenu，这样就可以了。当子菜单位置绝对时，它不会占用空间并越过下面的菜单，但是相对位置，它会占用空间并移动其他菜单项。请务必在仅定位到移动设备菜单的媒体查询中执行此操作，因为桌面菜单需要子菜单上的position: absolute;。

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

1 个答案: