Multiple layer Dropdown menu using CSS - html

Question

I am able to get my dropdown menu to work perfectly, only issue is that i'm having trouble trying to figure out how I can add another dropdown level.
For instance, I want another level to drop down when I hover over Test3. What am I missing in the code to do so?
CSS:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
HTML:
<nav>
<ul id="menu">
<li class="dropdown">
Location
<div class="dropdown-content">
Test1
Test2
Test3
</div>
</ul>
</nav>

Answer 1

Maybe you didn't close the li tag? Placing a div inside the li seems to make things complicated.
I think it's easier if you make a new level just wrap everything in a ul-li-ul loop. Like this:
<ul id="menu">
<li>SOMETHING LV1</li>
<li>SOMETHING LV1</li>
<li>DROPDOWN 1
<ul>
<li>SOMETHING LV2</i></li>
<li>DROPDOWN 2</i>
<ul>
<li>SOMETHING LV3</li>
</ul>
</li>
</ul>
</li>
</ul>
Then hide it and show when hover:
#menu li ul{
display: none;
}
#menu li:hover>ul{
display: block;
position: absolute;
width: 100%;
}
So you can have two or three levels, no problem.
Please see the fiddle example: https://jsfiddle.net/fp1x1v05/
Hope this helps.

Answer 2

Sorry, posted an answer before that didn't isolate the links.
What you want to do, ideally, is target hover events on elements that wrap links, then use a bit more specificity in your selectors.
Try this one:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdown-content ul li {
display: none;
}
.dropdown:hover .dropdown-content li:hover ul li {
display: block;
}
</style>
<nav>
<ul id="menu">
<li class="dropdown">
Location
<ul class="dropdown-content"><li>Test1<ul><li>Subtest 1</li></ul></li>
<li>Test2</li>
<li>Test3</li></ul>
</ul>
</nav>

Answer 3

nav ul
{
list-style: none;
padding: 0;
text-align:center;
}
nav li
{
background-color: rgba(0,100,0,0.5);
position: relative;
display: inline-block;
}
nav li:hover
{
background-color: rgba(100,0,0,0.5)
}
nav a
{
display:block;
padding: 0.5em;
text-decoration: none;
color: rgba(0,0,100,0.9);
}
nav ul ul
{
display: none;
position: absolute;
}
nav li:hover > ul
{
display: block;
}
nav ul ul ul
{
left: 100%;
top: 0;
}
nav > ul > li > ul > li
{
min-width: 100%;
}
<nav>
<ul>
<li>
1.First
<li>
2.Second
<ul>
<li> 2.1
<li> 2.2
<ul>
<li> 2.2.1
<li> 2.2.2
<ul>
<li> 2.2.2.1
<li> 2.2.2.2
</ul>
</ul>
</ul>
<li> 3.Third
</ul>
</nav>