website preview我在将下拉菜单插入我网站 html 代码的导航栏时遇到问题。我尝试了各种选择，但似乎没有一个有效。有什么想法吗？
我想使“按钮”成为下拉菜单，我在代码中用“ROLLDOWN”表示。
<nav id="nav">
<ul>
<li class="current"><a href="index.html">Option1</a></li>
<li><a href="park.html">Option2</a></li>
<li><a href="jatekok.html"> <font color="#d30000">ROLLDOWN</font></a></li>
<li><a href="szolgaltatasok.html">Option3</a></li>
<li><a href="kapcsolat.html">Option4</a></li>
</ul>
</nav>最佳答案
有帮助吗:
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
font-family: sans-serif;
}
.symbol {
font-family: Symbola;
}
#dropDown {
position: relative;
background-color: #DCCDCD;
width: 115px;
padding: 8px;
border-radius: 8px;
}
#dropDownTitle {
cursor: pointer;
}
#dropDownItems {
position: absolute;
width: 100%;
background-color:#E5E2E2;
left: 0;
top: 100%;
transition-duration: 0.5s;
}
#dropDownItems > div {
padding: 12px;
cursor: pointer;
}
#dropDownItems > div:hover {
background-color: aliceblue;
}
</style>
<body>
<div id="dropDown">
<div id="dropDownTitle">Click Here <span class="symbol">▼</span></div>
<div id="dropDownItems" style="transform: translateY(-50%) scaleY(0)">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</div>
<script>
var dropDownj = document.getElementById("dropDown");
var dropDownTitlej = document.getElementById("dropDownTitle");
var dropDownItemsj = document.getElementById("dropDownItems");
dropDownTitlej.onclick = function() {
if (dropDownItemsj.style.transform !== "translateY(-50%) scaleY(0)") {
dropDownItemsj.style.transform = "translateY(-50%) scaleY(0)"
} else {
dropDownItemsj.style.transform = "translateY(0) scaleY(1)";
}
}
</script>
</body>
</html>
关于javascript - 如何在html中制作下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55403728/