如何使用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>uj5u.com熱心網友回復：
z-index您可以通過使用適當的元素嵌套來實作您想要做的事情。
這是一個基本示例（沒有影片和一些智能元素比例/放置）：https ://codepen.io/etumyan/pen/eYeXKxg
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/439427.html
下一篇：撲動中的OTP頁面