Jquery 我如何强制白色背景中的元素覆盖其他元素？

我有这个菜单，我想要手机版，像这样：

在这一刻，我处于当前的处境：

可能我可以使用css属性溢出，但我不知道如何使用它

这是我的菜单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>

我没有一个演示，我不能使它，因为有太多的代码显示。 问题的环节：

---

菜单按钮可以从990像素的屏幕宽度进行查看。

问题在于子菜单无序列表元素的z索引。要使其显示在顶部，请将index属性应用于

#primary_nav_wrap ul li:hover>ul

元素。或静态地添加到子菜单下拉列表

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

或静态（即不悬停）

---

请提供一支笔和你的问题的工作演示。我有太多的代码创建一支笔，如果你想我可以给我的网站链接，在那里你可以分析问题，这对你来说是好的？感谢您的帮助如果您查看第一个图像，这是一个示例，它看起来好像在选择第一个项目时子菜单项是可见的，就像一个可切换的可折叠菜单。如果希望项目与菜单的其余部分内联，则Z索引排序将不起作用。此外，由于它是移动的，悬停状态不是UX的理想方法。问题并不是特别要求提供一个移动友好菜单，而是要求解决分层列表的问题，这些问题可以通过z索引解决。

“我有这个菜单，我想要移动版本，就像这样”

问题的第一部分。他没有要求提供菜单解决方案。他表达了他的现状，并展示了他的执行情况。我为他目前的分层问题提供了解决方案，这样他就可以继续前进。第一张粘贴的图片是其他人的网站。我以发布的网站为例，“我正在尝试模仿这个，帮帮我”

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

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