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

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