Nested List Dropdown Menu HTML & CSS - html

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>Contact</li>
<li>Products
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
</li>
<li>About</li>
<li>Home</li>
</ul>
</div>

Answer 1

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>Contact</li>
<li>
Products
<ul class="dropdown-content">
<li>List 1</li>
<li>List 2</li>
</ul>
</li>
<li>About</li>
<li>Home</li>
</ul>
</div>

Answer 2

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;
}