Question

我刚刚开始学习网页开发语言，我现在正尝试使用javascript创建一个下拉列表（我已经在CSS中尝试了，但它没有工作）。
如果你能告诉我代码中的错误，我会很乐意。

<nav>
    <ul class="anchors">
    <!-- This is where the dropdown list should appear if you hover your mouse over it -->
        <li class="list-comanda">
            <a href="javascript:void(0)" onmouseover="dropdown()">Comanda</a>
        </li>  
        <div class="dropdown" id="dropdown" style="display: none;">
            <ul class="dropdown-list">
                <li class="dropdown-l-magneti"><a href="magneti"> Magneti de frigider personalizati</a></li>
                <li class="dropdown-l-hartie"><a href="hartie"> Obiecte facute din hartie</a></li>
            </ul>
        </div>
        <li class="list-contact"><a href="contact">Contacteaza-ma</a></li>
    </ul>
</nav>
<script>        
    function dropdown{
        var dropdown = document.getElementById("dropdown");
        dropdown.style.display = "inline-block";
    }   
</script>

如果我的代码无组织，我真的很抱歉。

Answer 1

你可以完全用css实现这一点。首先创建菜单标记，确保将下拉列表嵌入到您想要的内容中，我们将为其提供一个dropdown类，以便我们可以默认隐藏它们。

<ul id='menu'>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
  <li class='dropdown'>link 4
    <ul>
      <li>sublink</li>
      <li>sublink</li>
      <li>sublink</li>
    </ul>
  </li>
</ul>

在我们的标记中，您可以看到我们有一个带有嵌入式下拉列表的子li，我们在这里使用一个类，因为使用id会阻止我们在其上设置多个下拉列表相同的页面（记住id＆＃39; s应始终是唯一的，用于描述内容的特定部分，而类允许我们重复常见任务。）

然后我们联系我们的CSS：

#menu {
  list-style: none;
}

#menu li {
  vertical-align: top;
  display: inline-block;
}

#menu .dropdown ul {
  background: red;
  display: none;
}

#menu .dropdown:hover > ul {
  display: block;
}

#menu .dropdown ul li {
  display: block;
}

这里需要注意的一些事项，在开始时我们将下拉ul的默认样式设置为display: none，这会完全隐藏在页面中。我们还会在菜单上使用vertical-align: top，以确保当下拉菜单显示在显示下拉菜单时没有按下菜单项时（尝试禁用此功能，您可以＆＃39}我会明白我的意思。最后，我们使用子选择器工具在下拉菜单中添加hover事件。这意味着我们可以将hover事件绑定到我们的.dropdown类，并将样式直接应用于其子ul（这是隐藏的元素）。如果我们只是尝试将.dropdown类设置为display; block，那么我们就不会看到任何更改。

A jsfiddle of this example can be found here没有漂亮的造型，但我相信你能自己解决这个问题。如果您有任何其他问题，请告诉我。

除了这篇文章的答案之外，我还要注意使用类似Twitter's Bootstrap之类的东西是快速实现样式精美且跨浏览器组件的好方法，上面的链接直接适用于他们的下降。但是我知道你说你是网络开发的初学者，我完全明白你想学习如何把这些东西放在一起;只是不养成重新发明轮子的习惯，你很快就会发现使用经过测试的代码有时候是更好的选择：）

Answer 2

正确声明功能下拉菜单： - function dropdown(){//body}

Answer 3

您正在调用dropdown函数onmouseover。这个功能在哪里？

改变：

function dropdown{

为：

function dropdown(){

<强> check this fiddle

Answer 4

我认为我们需要（）一个函数

<script>

        function dropdown(){
            var dropdown = document.getElementById("dropdown");
            dropdown.style.display = "inline-block";
        }

    </script>

Answer 5

这会不容易：

＆＃13;

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>

＆＃13;

Javascript下拉列表无法正常工作

5 个答案: