jquery - 我怎样才能强制白色背景中的元素放在其他元素之上？

Question

我有这个菜单，我想要移动版，像这样:

此时此刻我处于现状:

可能我可以使用 css 属性 overflow 但我不知道如何使用它。

这是我的菜单html代码:

    <div data-collapse="medium" data-animation="default" data-duration="400" class="mainmenu w-nav">
  <a href="#" class="brand w-nav-brand">
    <img alt="Vetrauto" src="images/Risorsa-5.svg" class="logo">
  </a>
  <div class="container w-container nav-container">
    <nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
      <ul>
        <li>
          <a href="http://www.alpastomendrisio.ch/index.php" class="nav-link w-nav-link w--current">Home</a>
          <ul>
            <li><a href="http://www.alpastomendrisio.ch/chisiamo.php">Chi siamo</a></li>
          </ul>
        </li>
        <li>
          <a href="http://www.alpastomendrisio.ch/servizi.php" class="nav-link w-nav-link">Servizi</a>
          <ul>
            <li><a href="http://www.alpastomendrisio.ch/servizi/servizi-mobile.html">Servizi mobile</a></li>
            <li><a href="http://www.alpastomendrisio.ch/servizi/oscuramento-vetri.html">Oscuramento vetri</a></li>
            <li><a href="http://www.alpastomendrisio.ch/servizi/wrapping.html">Wrapping</a></li>
          </ul>
        </li>
        <li>
          <a href="http://www.alpastomendrisio.ch/vantaggi.php" class="nav-link w-nav-link">I vantaggi per voi</a>
        </li>
        <li>
          <a href="http://www.alpastomendrisio.ch/galleria.php" class="nav-link w-nav-link">Galleria</a>
          <ul>
            <li><a href="http://www.alpastomendrisio.ch/galleria/riparazione-mobile.php">Riparazione mobile</a></li>
            <li><a href="http://www.alpastomendrisio.ch/galleria/oscuramento-vetri.php">Oscuramento vetri</a></li>
            <li><a href="http://www.alpastomendrisio.ch/galleria/wrapping.php">Wrapping</a></li>
          </ul>
        </li>
        <li>
          <a href="http://www.alpastomendrisio.ch/contatti.php" class="nav-link w-nav-link">Contatti</a>
        </li>
      </ul>
    </nav>
    <div class="menu-button w-nav-button">
      <div class="icon w-icon-nav-menu"></div>
    </div>
  </div>
</div>

这是我的CSS代码:

/* Sub menu */
#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

#primary_nav_wrap ul a {
  display: block;
  text-decoration: none;
  line-height: 32px;
  padding: 0 15px;
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 200px;
  background: #fff;
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px;
  color: #000;
  font-size: 18px;
}

#primary_nav_wrap ul ul li:hover {
  background: #ffed00;
}

#primary_nav_wrap ul ul a:hover {
  color: #fff;
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}

#primary_nav_wrap ul li:hover>ul {
  display: block
}

我没有演示，我无法制作它，因为要显示的代码太多了。问题链接:http://www.alpastomendrisio.ch/index.php菜单按钮可以在宽度为 990 像素的屏幕上查看。

Answer 1

问题出在子菜单无序列表元素的 z-index 上。要使其显示在顶部，请将索引属性应用于 #primary_nav_wrap ul li:hover>ul 元素。或者静态到子菜单下拉列表

#primary_nav_wrap ul li:hover>ul {
    display: block;
    z-index: 999;
}

或静态(即不悬停)

#primary_nav_wrap ul li>ul {
    z-index: 999;
}