我想做一個下拉菜單，但不知道如何

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>