我想做一个下拉菜单，但不知道如何

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>