Я хочу сделать выпадающее меню, но не могу понять, как

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>