menu button with list when hovered over and nested menu - html

Question

I have created a button (lets call it Menu button) that has 3 lines on it to symbolise a menu. When the user hovers over it displays a list. Up to here the code is doing what I want. It was showing the two buttons however when I give each button a nested list the display goes all funny. Here is my fiddle so far
What I want is when the menu button is hovered over it displays two further buttons (or I guess can just be list items), one button called Region and one called Export. When either of these are hovered over I would like them to display a list to the side of themselves.
HTML
<div class="dropdown">
<button class="dropbtn">
<div class="navbar">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</button>
<div class="dropdown-content">
<ul>
<li>
<button class="dropbtn" value="Region">
<div class="dropdown-content">
<ul>
<li>Japan</li>
<li>South America</li>
<li>Europe</li>
</ul>
</div>
</li>
<li>
<button class="dropbtn" value="Export">
<div class="dropdown-content">
<ul>
<li>Excel</li>
<li>CSV</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lightblue;
}
.navbar {
width: 50%;
display: block;
margin: 50px auto;
padding: 8px 10px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.navbar div {
height: 5px !important;
background: #fff;
margin: 7px 0px 7px 0px;
border-radius: 25px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.two {
width: 35px;
}
.three {
width: 50px;
}
.navbar:hover div {
width: 60px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropbtnLi {
background-color: #9FACEC;
color: white;
font-size: 16px;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content li:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #4C66E9;}

Answer 1

On hovering you need to display them separately, i.e. when hovering
the main button, display only the sub-buttons. And when you hover the
sub-buttons then you can display the list.
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lightblue;
}
/* vertical threline nav bar */
.navbar {
width: 50%;
display: block;
margin: 50px auto;
padding: 8px 10px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.navbar div {
height: 5px !important;
background: #fff;
margin: 7px 0px 7px 0px;
border-radius: 25px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.two {
width: 35px;
}
.three {
width: 50px;
}
.navbar:hover div {
width: 60px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
width: 100%;
}
.dropbtnLi {
background-color: #9FACEC;
color: white;
font-size: 16px;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
position: relative;
}
/* Change color of dropdown links on hover */
.dropdown-content li:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #4C66E9;}
.dropdown-content-list {
display: none;
}
.dropdown-content-list:hover {
display: block !important;
}
.dropdown-content-li:hover .dropdown-content-list {
display: block;
position: absolute;
left: 100%;
top: 0;
background: #efefef;
}
<div class="dropdown">
<button class="dropbtn">
<div class="navbar">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</button>
<div class="dropdown-content">
<ul>
<li class="dropdown-content-li">
<button class="dropbtn" value="Region">Country</button>
<div class="dropdown-content-list">
<ul>
<li>Japan</li>
<li>South America</li>
<li>Europe</li>
</ul>
</div>
</li>
<li class="dropdown-content-li">
<button class="dropbtn">Export</button>
<div class="dropdown-content-list">
<ul>
<li>Excel</li>
<li>CSV</li>
</ul>
</div>
</li>
</ul>
</div>
</div>

Answer 2

Here is working code.
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lightblue;
}
/* vertical threline nav bar */
.navbar {
width: 50%;
display: block;
margin: 50px auto;
padding: 8px 10px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.navbar div {
height: 5px !important;
background: #fff;
margin: 7px 0px 7px 0px;
border-radius: 25px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.two {
width: 35px;
}
.three {
width: 50px;
}
.navbar:hover div {
width: 60px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropbtnLi {
background-color: #9FACEC;
color: white;
font-size: 16px;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content li:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover > .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #4C66E9;}
<div class="dropdown">
<button class="dropbtn">
<div class="navbar">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</button>
<div class="dropdown-content">
<ul>
<li>
<button class="dropbtn" value="Region">
<div class="dropdown-content">
<ul>
<li>Japan</li>
<li>South America</li>
<li>Europe</li>
</ul>
</div>
</li>
<li>
<button class="dropbtn">
<div class="dropdown-content">
<ul>
<li>Excel</li>
<li>CSV</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Or you can set direct child for hovering on parent li. like .dropdown:hover > .dropdown-content {display: block;}