Derek Derek - 3 years ago 52
CSS Question

Nested List Dropdown Menu HTML & CSS

I am trying to make a list that displays horizontally as a navbar, and that the products button would have a drop-down-menu. Any help would be appreciated, I have been trying different methods for hours. I even searched this page for other examples, but I could not get them to work for my needs.



.navbar li{
list-style:none;
position:relative;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #666666;
}

.navbar li{
float:right;
}

.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover {
background-color: #000000;
}

<div>
<ul class="navbar">
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#.html">List 1</a></li>
<li><a href="#.html">List 2</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>




Answer Source

If you're not using bootstrap, you could achieve it like below:

.navbar li{
  list-style:none;
  position:relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #666666;
}

.navbar li{
  float:right;
}

.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar li a:hover {
  background-color: #000000;
}

.dropdown-content {
  display: none;
}

.dropdown:focus + .dropdown-content {
  display: block;
}
<div>
  <ul class="navbar">
    <li><a href="contact.html">Contact</a></li>
    <li>
      <a href="#" class="dropdown">Products</a>
      <ul class="dropdown-content">
        <li><a href="#.html">List 1</a></li>
        <li><a href="#.html">List 2</a></li>
      </ul>
    </li>
    <li><a href="about.html">About</a></li>
    <li><a href="index.html">Home</a></li>
  </ul>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download