Vertical dropdown Menu with submenu showing on hover - html

Question

I want to make a vertical dropdown menu with the following structure(for each "button" a different "dropdown" div).The idea is when I hover "button", the "dropdown" to appear over the "button" with the same size ( the "dropdown" shrinks to the "button" size with equal heights "subnav1" ) or to appear left to the "dropdown" ( again with equal heights "subnav1" ). The problem, however , is that I can't make the "dropdown" display:blocks on "button" hover and ,in the second case, the "button" to be hovered while selecting "subnav1" element.
HTML:
<div class="nav">
<ul class="nav1">
<li class="button"><div class="subnav">BUTTON1</div></li>
<li class="button"><div class="subnav">BUTTON2</div></li>
<li class="button"><div class="subnav">BUTTON3</div><li>
<li class="button"><div class="subnav">BUTTON4</div></li>
<li class="button"><div class="subnav">BUTTON5</div></li>
</ul></div>
<div class="dropdown">
SUBBUTTON1
SUBBUTTON1
SUBBUTTON1
</div>
CSS:
.nav {
width: 180px;
padding: 1vm;
float:left;
height:450px;
position:relative;
text-align:center;
background-color:#a56d3b;
}
ul{
list-style:none;
margin: 0;
padding: 0;
text-align:right;
}
.nav a{
text-decoration:none;
}
.subnav{
font-weight:bold;
text-align:center;
color:#FCFBE3;
font-family: 'PT Serif', serif;
font-size:1.3em;
display:block;
}
.button{
border-bottom:1PX DOTTED #FFECBA;
border-right:1PX DOTTED #FFECBA;
height:90px;
width:100%;
padding:2em 0 0 0 ;
cursor:pointer;
}
.button:last-child{
border-bottom:0px;
}
.button:hover{
background-color:rgba(0,0,0,0.5);
}
.dropdown{
height:89px;
float:left;
width:auto;
min-width:100px;
text-align:center;
margin:0 180px;
position:absolute;
cursor:pointer;
border:1px solid black;
}
.subnav1{
height:30px;
width:180px;
padding:5px 0;
color:black;
font-family: 'PT Serif', serif;
font-size:1em;
color:white;
text-decoration:none;
background-color:#D8A06E;
DISPLAY:BLOCK;
}
.subnav1:hover{
background-color:rgba(0,0,0,0.5);
}
.nav.nav1 .button:hover .dropdown{
display:block;
}

Answer 1

I think this is how you want it to be. Let me know if this is not the result you are looking for
.dropbtn {
background-color: #E61094;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.nav {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 115px;
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;
}
.dropdown-content a:hover {
background-color: #9E1192
}
.nav:hover .dropdown-content {
display: block;
}
.nav:hover .dropbtn {
background-color: #F576EA;
}
<div class="nav">
<button class="dropbtn">Dropdown 1</button>
<div class="dropdown-content">
Subbutton 1
Subbutton 2
Subbutton 3
</div>
</div>
<div class="nav">
<butoon class="dropbtn">Dropdown 2</button>
<div class="dropdown-content">
Subbutton 1
Subbutton 2
Subbutton 3
</div>
</div>
<div class="nav">
<butoon class="dropbtn">Dropdown 3</button>
<div class="dropdown-content">
Subbutton 1
Subbutton 2
Subbutton 3
</div>
</div>
<div class="nav">
<butoon class="dropbtn">Dropdown 4</button>
<div class="dropdown-content">
Subbutton 1
Subbutton 2
Subbutton 3
</div>
</div>
<div class="nav">
<butoon class="dropbtn">Dropdown 5</button>
<div class="dropdown-content">
Subbutton 1
Subbutton 2
Subbutton 3
</div>
</div>

Answer 2

you are using absolutely wrong markup of the HTML navigation, correct and valid structure is:
<nav class="nav">
<ul>
<li>
1st Level
<ul>
<li>2nd Level</li>
<li>2nd Level</li>
<li>2nd Level</li>
</ul>
</li>
<li>
1st Level
<ul>
<li>2nd Level</li>
<li>2nd Level</li>
<li>2nd Level</li>
</ul>
</li>
<li>
1st Level
<ul>
<li>2nd Level</li>
<li>2nd Level</li>
<li>2nd Level</li>
</ul>
</li>
</ul>
</nav>
and then it is easy as a pie, just styling:
.nav {
display: block;
font-family: sans-serif;
}
.nav ul {
padding: 0;
list-style: none;
}
.nav ul li {
display: inline-block;
position: relative;
white-space: nowrap;
}
.nav ul li a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: #000000;
}
.nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
border: 1px solid #000000;
}
.nav ul li ul li {
display: block;
}
.nav ul li:hover ul {
display: block;
}
See this fiddle https://jsfiddle.net/vtt0qnpt/
Enjoy