Nested List Dropdown Menu HTML & CSS

Question

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>

I could not get the drop-down list to display, it seems that my implementation of a javascript in a separate div was causing an issue, as the other answers and my previous code attempts did not work until I removed it. — , Jul 25 '17 at 04:07
related: https://stackoverflow.com/questions/31508500/dead-simple-collapsable-list-function-for-deep-and-shallow-nested-ul-li-lists-j — Ciro Santilli OurBigBook.com, Jul 24 '19 at 21:53

score 2 · Accepted Answer · answered Jul 24 '17 at 23:58

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>

Thank you so much! It seems that the javascript in the div below this one was causing an issue of it not working too, as both your code and my previous attempts did not work in dreamweaver or browsers until I removed the javascript. — , Jul 25 '17 at 04:08

score 0 · Answer 2 · answered Jul 25 '17 at 00:00

Add the following CSS below. You want to make sure to set display: none to the unordered list that's contained within the list item that has the dropdown. So i gave it a class so that I could target it specifically.

Then when hovering overing that list item i then set the unordered list to display block which makes it appear only on hover.

Then i display blocked and turned the float off on the list items within the unordered list so that they displayed blocked.

.navbar li.dropdown ul {
display: none;
}

.navbar li.dropdown:hover ul {
display: block;
}

.navbar li.dropdown ul li {
display: block;
float: none;
}

Thank you for your help too! Your method worked as well after I removed the javascript I have running below this div. I guess it was a separate issue after all. — , Jul 25 '17 at 04:10

Nested List Dropdown Menu HTML & CSS

2 Answers2