无序列表中的 css 下拉菜单 (ul)

Question

我想问你是否有什么办法可以在Services ul, li 标签内插入下拉菜单？ 我知道如何在不使用 ul/li 而使用按钮的情况下添加下拉菜单，但我想知道 ul/li 是否有任何其他方式，从那时起我必须重组 css...所以你可能理解我！ 我会把代码放下，这样你就可以快速浏览一下。非常感谢！

<nav>
    <ul class="nav-links">
        <li><a class="nav-link" href="index.html" id="active">Home</a></li>
        <li><a class="nav-link" href="#">Services</a></li>
        <li><a class="nav-link" href="#">About</a></li>
        <li><a class="nav-link" href="#">Contact</a></li>
    </ul>
</nav>

Answer 1

你可以这样做：

来源

  #nav {
  list-style: none inside;
  margin: 0;
  padding: 0;
  text-align: center;
}

#nav li {
  display: block;
  position: relative;
  float: left;
  background: #24af15;
  /* menu background color */
}

#nav li a {
  display: block;
  padding: 0;
  text-decoration: none;
  width: 200px;
  /* this is the width of the menu items */
  line-height: 35px;
  /* this is the hieght of the menu items */
  color: #ffffff;
  /* list item font color */
}

#nav li li a {
  font-size: 80%;
}


/* smaller font size for sub menu items */

#nav li:hover {
  background: #003f20;
}


/* highlights current hovered list item and the parent list items when hovering over sub menues */

#nav ul {
  position: absolute;
  padding: 0;
  left: 0;
  display: none;
  /* hides sublists */
}

#nav li:hover ul ul {
  display: none;
}


/* hides sub-sublists */

#nav li:hover ul {
  display: block;
}


/* shows sublist on hover */

#nav li li:hover ul {
  display: block;
  /* shows sub-sublist on hover */
  margin-left: 200px;
  /* this should be the same width as the parent list item */
  margin-top: -35px;
  /* aligns top of sub menu with top of list item */

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a>
    <ul>
      <li><a href="#">Services-1</a></li>
      <li><a href="#">Services-2</a></li>
      <li><a href="#">SUB Services »</a>
        <ul>
          <li><a href="#">Sub Services 1</a>
            <li><a href="#">Sub Services 2</a>
        </ul>
        </li>
    </ul>
    </li>
    <li><a href="#">About</a></li>
</ul>

Answer 2

<nav>
    <ul class="nav-links">
        <li><a class="nav-link" href="index.html" id="active">Home</a></li>
        <li><a class="nav-link" href="#">Services</a></li>
        <li><a class="nav-link" href="#">About</a></li>
        <li><a class="nav-link" href="#">Contact</a></li>
    </ul>
</nav>