将下拉菜单添加到Li nav html

Question

所以我有这样的想法：

<ul class="nav-menu list-unstyled">
      <li><a href="#header" class="smoothScroll">Home</a></li>
      <li><a href="#about" class="smoothScroll">About</a></li>
      <li><a href="#services" class="smoothScroll">Services</a></li>
      <li><a href="#contact" class="smoothScroll">Contact</a></li>
</ul>

就像它得到的一样简单。但我想要做的是向about <li>标签添加一个可悬停的下拉列表，这样我就可以拥有诸如Team等选项。

我试图添加一些东西，比如带有<li>的<li>，但是没有起作用。我也试着研究如何添加它，但在我的示例中找不到它：

<ul class="nav-menu list-unstyled">
          <li><a href="#header" class="smoothScroll">Home</a></li>
          <li><a href="#about" class="smoothScroll">About</a></li>
          <li><a href="#services" class="smoothScroll">Services</a>
 <li><a href="#services" class="smoothScroll">Services</a></li>
          <li><a href="#contact" class="smoothScroll">Contact</a></li>
    </ul>

我以前从来没有做过这方面的工作，而且在这一部分有一点经验不足，所以我希望有人能帮助我！谢谢：)

Answer 1

如果不在<li> - <li>中启动一个新的有序或无序列表，那么将一个列表项放入另一个列表项将不起作用。

你正在寻找的东西，可以使用CSS来完成。您可以使用:hover-pseudo类隐藏dropdown-content并仅在悬停时显示它。下面是一个例子：

​

.dropbtn {
  background-color: black;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.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-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: grey;
}

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

​

Answer 2

完成此操作的一个简单方法是创建一个div来包含<li><a href="#about" class="smoothScroll">About</a></li>中的子列表，因此它将如下所示。

​

.dropdown-content {
  display: none;
}

.dropdown-content a {
  display: block;
}

.dropdown:hover .dropdown-content {display: block;}

<li class="dropdown">
  <a href="#about" class="smoothScroll">About</a>
  <div class="dropdown-content">
    <a href="#">team</a>
    <a href="#">other member</a>
    <a href="#">etc.</a>
  </div>
 </li>

​

我为li提供了一个dropdown类，并创建了一个带有dropdown-content类的div，在about中添加了所需的子列表列表，现在您需要使用CSS代码display: none;隐藏dropdown-content的显示，并在dropdown-content display: block;中显示a标记。

最后，您现在需要做的就是创建.dropdown:hover .dropdown-content {display: block;}

很抱歉把答案写得这么长，希望能回答你的问题。

Answer 3

如果您想切换下拉菜单，请使用JS DOM和event。

​

ul {
  display: none;
}

div:hover ul {
  display: block;
}

<div>
  <button>Dropdown</button>
  <ul class="nav-menu list-unstyled">
    <li><a href="#header" class="smoothScroll">Home</a></li>
    <li><a href="#about" class="smoothScroll">About</a></li>
    <li><a href="#services" class="smoothScroll">Services</a></li>
    <li><a href="#contact" class="smoothScroll">Contact</a></li>
  </ul>
</div>

​