如何在悬停时添加下拉菜单？

Question

我在页面顶部有一个水平导航栏，其中包含以下代码。当我将鼠标悬停在“列”选项卡上时，我想要的是一个包含以下选项列表的下拉菜单：     

文章

    

画

    

访

    

时尚

这是我想要的图像：

nav {

  position: fixed;

  top: 0;

  width: 100%;

  background-color: rgba(0, 0, 0, 0.90);

  height: 60px;

  overflow: hidden;

  z-index: 100;

}

ul {

  position: absolute;

  right: 50px;

  line-height: 60px;

  height: 60px;

}

ul li {

  display: inline-block;

  position: relative;

  height: 100%;

}

ul li a {

  text-decoration: none;

  font-family: 'raleway';

  font-size: 23px;

  line-height: 60px;

  display: inline-block;

  padding-left: 15px;

  padding-right: 15px;

  color: white;

  box-sizing: border-box;

}

<nav>
  <ul>
    <li><a href="">Home</a>
      <li><a href="about/column.html">Columns</a>
        <li><a href="about/">Team Thrive</a>
  </ul>
</nav>

Answer 1

您的代码中存在一些问题。您必须关闭li代码。然后你必须在所有这些之前添加下拉菜单的HTML结构，例如：

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="about/column.html">Dropdown here</a>
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </li>
    <li><a href="about/">Team Thrive</a></li>
  </ul>
</nav>

然后，CSS的一小部分使其适用于li上的悬停状态并使用display: block;和display: none;

See working fiddle

Answer 2

您可以在以下官方w3schools链接中回答您的问题：http://www.w3schools.com/howto/howto_css_dropdown.asp

Answer 3

之前发布的W3学校链接是解决此特定问题的重要资源。使用该资源在in a fiddle左右播放，以使其发挥作用。

可以通过将html更改为以下内容来完成：

<nav>
  <ul>
  <li><a href="">Home</a></li>
  <li><div class="columns"><a href="about/column.html">Columns</a>
    <div class="dropdown">
    <a href="#">Articles</a>
    <a href="#">Videos</a>
    <a href="#">Interviews</a>
    <a href="#">Fashion</a>
  </div>
  </div>
  </li>
  <li><a href="about/">Team Thrive</a></li>
  </ul>
</nav>

并将以下内容添加到CSS中。您还需要删除导航css中隐藏的溢出：隐藏。

.columns {
  display: relative;
}

.dropdown {
    display: none;
    position: absolute;
}

.columns:hover .dropdown {
    display: block;
}