Is there a way to create a navigation menu with a sidebar similar to the one on ? The sidebar should appear when hovering over a navigation link, such as "products", while still allowing visibility and interaction with other links in the navigation. I'm having trouble implementing this functionality because currently, the sidebar covers up the navigation links when it appears.
<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>