Question

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>

Answer 1

有帮助吗？

<!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

Answer 2

显然，您需要为其设置样式，但这将为您提供下拉菜单的功能。

.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;}

<nav id="nav">
<ul>
    <li class="current"><a href="index.html">Option1</a></li>
    <li><a href="park.html">Option2</a></li>
    <li class="dropdown"><p class="dropdown">ROLLDOWN</p>
    	<ul class="dropdown-content">
		    <li><a href="#">Link 1</a></li>
		  </div>
		 </li>
    <li><a href="szolgaltatasok.html">Option3</a></li>
    <li><a href="kapcsolat.html">Option4</a></li>
</ul>
</nav>

如何在html中创建下拉菜单？

2 个答案: