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

how can I create navigation with a sidebar like on https://mailchimp.com/? the sidebar appears when you hover a navigation link, for example, "products", but you still can see other links from the navigation, click on them, hover, etc. Not sure how to implement this because in my case when I hover a link, a sidebar appears and I can't see the navigation

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  id="link" href="/" onm ouseover="addStyle()" onm ouseleave="removeStyle()">link1</a>
      <div id="submenu">
        <ul>
          <li>123</li>
          <li>456</li>
        </ul>
      </div>
      <a  href="/">link2</a>
      <a  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>

CodePudding user response：

What you're trying to do could be achived by using z-index with a proper element nesting.

Here is a basic example (without animations and some smart element proportion / placement): https://codepen.io/etumyan/pen/eYeXKxg