我想制作一个下拉菜单，但无法弄清楚如何

Question

我看了其他问题并且无法使其工作，这是我的HTML和CSS（随意更改或删除代码以使其更紧凑）。

.dropdown-menu li ul {
  display: none;
  height: auto;
  margin: 0;
  padding: 0;
  display: table;
}
.dropdown-menu li:hover ul {
  display: block;
  height: auto;
  margin: 0;
  padding: 0;
  display: table-cell;
}

<div class="nav">
  <div class="container">
    <ul class="pull-left">
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="#">Contact Us</a>
        <ul class="dropdown-menu">
          <li><a href="contact.html">Contact Us</a>
          </li>
          <li><a href="request.html">Request a building</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 1

你应该在顶级ul上使用它，而不是下降它，itseld。同时删除display属性的重新声明：

ul{
  list-style: none;
}
.pull-left > li{
  float: left;
  margin: 0 20px;
  overflow: hidden;
}
.pull-left > li > ul {
  display: none;
  height: auto;
  margin: 0;
  padding: 0;
}
.pull-left > li:hover > ul {
  display: block;
  height: auto;
  margin: 0;
  padding: 0;
}

<div class="nav">
  <div class="container">
    <ul class="pull-left">
      <li><a href="index.html">Home</a></li>
      <li><a href="#">Contact Us</a>
        <ul class="dropdown-menu">
          <li><a href="contact.html">Contact Us</a></li>
          <li><a href="request.html">Request a building</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>