qazxsw poi我无法在我网站的html代码的导航栏中插入下拉菜单。我尝试了各种各样的选择，但它们似乎没有用。任何的想法？
我想让“按钮”向下滚动，在代码中用“ROLL DOWN”表示。
有用吗：
<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>
显然你需要设置它的样式，但这将为你提供下拉列表的功能。
DEMO
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {display: block;}