Multiple layer Dropdown menu using CSS

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">
<a href="#" class="dropbtn">Location</a>
<div class="dropdown-content">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>  
</ul>
</nav>

Answer 1

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>
    <a href="#"> 1.First </a>
<li>
    <a href="#"> 2.Second </a>
    <ul>
        <li><a href="#"> 2.1</a>
        <li><a href="#"> 2.2 </a>
            <ul>
            <li><a href="#"> 2.2.1 </a>
            <li><a href="#"> 2.2.2 </a>
                <ul>
                <li> <a href="#"> 2.2.2.1 </a>
                <li> <a href="#"> 2.2.2.2 </a>
                </ul>
            </ul>
    </ul>
<li><a href="#"> 3.Third </a>
    </ul>
</nav>

Answer 2

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><a href="#">SOMETHING LV1</a></li>
    <li><a href="#">SOMETHING LV1</a></li>
    <li><a href="#">DROPDOWN 1</a>
      <ul>
        <li><a href="#">SOMETHING LV2</i></a></li>
        <li><a href="#">DROPDOWN 2</i></a>
          <ul>
            <li><a href="#">SOMETHING LV3</a></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 3

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">
<a href="#" class="dropbtn">Location</a>
<ul class="dropdown-content"><li><a href="#">Test1</a><ul><li>Subtest 1</li></ul></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li></ul>
</ul>
</nav>