Question

我想让我的导航菜单下拉列表。我尝试了不同的方法，但没有发生任何事情。

这是我的HTML代码：

<ul>

  <li><a href="index.html">Home</a></li>

  <li><a href="Countries.html">Geography</a></li>

  <li><a href="English.html">English</a></li>

  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>

</ul>

这是我的CSS代码：

ul {
  padding: 15px;
  margin: -10px;
  overflow: hidden;
  list-style-type: none;
  background-color: #171B29;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

li a:hover {
  background-color: #555;
}

li icon {
  display: none;
}

@media screen and (max-width:680px) {
  ul.topnav li:not(: first-child) {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {
    position: absolute;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

当我尝试制作下拉菜单时，整个菜单变得非常糟糕。我知道我的代码非常糟糕，但如果有人有解决方案我会很感激。谢谢你的推荐

Answer 1

您应该尝试在 http://www.w3schools.com/css/css_dropdowns.asp 上找到答案网页内容相当不错，易于理解。

Answer 2

您是否也包含了JavaScript？您在点击时指定了切换（myFunction），因此您也需要JavaScript。

当然，您可以使用HTML和CSS作为下拉列表，如上面的帖子中所列。

Answer 3

如果您的问题是希望<li>元素垂直堆叠，您可以使用flexbox简单地解决这个问题。此外，如果您计划实施＆＃34;下拉＆＃34;仅使用HTML和＆amp; amp; CSS，您需要在导航菜单派生的顶级元素上添加:hover伪类。在我链接到下面的示例中，我在<ul>元素上执行了此操作。或者，您可以在JavaScript中使用mouseover事件。

此外，请注意您使用的li icon CSS选择器实际上并不是有效的选择器。虽然很多人使用<i>标记作为图标容器，但HTML中没有实际的图标标记。

https://jsfiddle.net/IsenrichO/8t4jhvcs/20/

我想让我的菜单下拉菜单

3 个答案: