html - 我想做一个下拉菜单，但不知道怎么做

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 上使用它，而不是在下拉本身上。同时删除 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>