CODEWITHSUNDEEP
htmlcssdrop-down-menu
Luke Smythe
Luke Smythe

Reputation: 3

I want to make a drop down menu but can't figure out how

I have looked other questions and can't get it to work, here is my HTML and CSS (feel free to change or remove code to make it more compact).

.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>

Upvotes: 0

Views: 35

Answers (1)

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

You should use it on the top level ul, not the dropping down, itseld. Also remove the re-declaration of display property:

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>

Upvotes: 1

Related Questions