如何使用类似的侧边栏创建导航https://mailchimp.com/?当你悬停导航链接时，侧边栏就会出现，例如；产品"；，但是你仍然可以从导航中看到其他链接，点击它们，悬停等等。不知道如何实现，因为在我的情况下，当我悬停链接时，会出现一个侧边栏，我看不到导航
示例
<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>您想要做的事情可以通过使用具有适当元素嵌套的z-index来实现。
以下是一个基本示例(没有动画和一些智能元素比例/放置(：https://codepen.io/etumyan/pen/eYeXKxg