如何创建带有侧边栏的导航菜单 mailchimp.com

Question

如何创建像 https://mailchimp.com/ 那样带有侧边栏的导航？当您悬停导航 link 时侧边栏出现，例如“产品”，但您仍然可以从导航中看到其他 link，单击它们，悬停等。不确定如何实现这是因为在我的例子中，当我将鼠标悬停在 link 上时，会出现一个侧边栏，但我看不到导航

example

<html>
  <head>
    <style>
      #menu {
        width: 100%;
        height: 70px;
        border: 1px black solid;
      }

      #submenu {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        border: 1px black solid;
        width: 500px;
        background-color: gray;
        z-index: 600;
        display: none;
      }

      .open {
        z-index: auto;
        display: block !important;
      }

      .link {
        vertical-align: middle;
        display: inline-block;
      }

      .linkOpen {
        z-index: 620;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <a class="link" id="link" href="/" onmouseover="addStyle()" onmouseleave="removeStyle()">link1</a>
      <div id="submenu">
        <ul>
          <li>123</li>
          <li>456</li>
        </ul>
      </div>
      <a class="link" href="/">link2</a>
      <a class="link" href="/">link3</a>
    </div>
    <script>
      function addStyle() {
        var element = document.getElementById("submenu");
        element.classList.add("open");
        var link = document.getElementById("link");
        link.classList.add("linkOpen");
      }

      function removeStyle() {
        var element = document.getElementById("submenu");
        element.classList.remove("open");
      }
    </script>
  </body>
</html>

Answer 1

可以通过使用 z-index 和适当的元素嵌套来实现您想要做的事情。

这是一个基本示例（没有动画和一些智能元素比例/位置）：https://codepen.io/etumyan/pen/eYeXKxg

如何创建带有侧边栏的导航菜单 mailchimp.com

How to create the navigation menu with sidebar as on mailchimp.com

css

navigation

user-interface

sidebar