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

Question

website preview I'm having trouble inserting a rolldown menu into the navigation bar on my website's html code. 网站预览我在将下拉菜单插入网站html代码上的导航栏中时遇到麻烦。 I have tried various options but non of them seems to work. 我尝试了各种选择，但似乎都不起作用。 Any idea? 任何想法？

I want to make the "button" a rolldown which I indicated with "ROLLDOWN" in the code. 我想使“按钮”向下滚动，在代码中用“ 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

Is it helpful: 是否有帮助：

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

Obviously you'd need to style it but this will give you the functionality of the dropdown. 显然，您需要设置样式，但这将为您提供下拉菜单的功能。

 .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 个解决方案

解决方案1
1 2019-03-30 12:07:51

解决方案2
0 2019-03-28 18:26:23

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

问题描述

2 个解决方案

解决方案1 1 2019-03-30 12:07:51

解决方案2 0 2019-03-28 18:26:23

解决方案1
1 2019-03-30 12:07:51

解决方案2
0 2019-03-28 18:26:23