Drop right in drop down menu, position next to hover text - html

Question

I'm trying to implement a navigation system with a drop down menu. This menu will also have an extra menu that drops to the right. Without using lists.
I'm having difficulties positioning the right down menu. What I'm trying to do is have a menu pop out on the same height but at the right side of the hovered button.
How I wanted to do this was by using absolute position.
What I understand is that
position: absolute; refers to the first positioned parent.
In my case, i'm assuming:-
"navbar" -- Parent
"subnav" -- 1st Child
"subnav-content" -- 2nd child
"subnav-content-subnav" -- 3rd child
"subnavbtn2x" -- 4th child
.subnav-content2x{
position: absolute;
}
When I add the above code, from which class is the position being referenced?
My plan was to have the position from subnavbtn2x
referenced in positioning the right down menu.
Or perhaps someone has a better way of doing it?
HTML
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">First Nav</button>
<div class="subnav-content">
Some page
Some page
Some page
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Second nav</button>
<div class="subnav-content">
<div class="subnav-content-subnav">
<button class="subnavbtn2x">Right first</button>
<div class="subnav-content2x">
Right 1
Right 2
</div>
</div>
<div class="subnav-content-subnav">
<button class="subnavbtn2x">Right Second</button>
<div class="subnav-content2x">
Right 3
Right 4
</div>
</div>
</div>
</div>
</div>
CSS
.navbar {
overflow: hidden;
}
.subnav {
overflow: hidden;
float: left;
}
.subnav-content {
display: none;
position: absolute;
background-color: #7E8185;
min-width: 160px;
z-index: 1;
}
.subnav-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: black;
margin: 0;
}
.subnavbtn2x {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: -16px -16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.subnav-content2x {
display: none;
position: absolute;
background-color: #7E8185;
margin-left: 1px;
top: 1%;
left: 100%;
min-width: fit-content;
z-index: 1;
}
.subnav-content2x a {
float: left;
text-decoration: none;
display: block;
text-align: left;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: #7E8185;
}
.subnav:hover .subnav-content {
display: block;
}
.subnav .subnav-content-subnav:hover .subnav-content2x {
display: block;
}
Expected result: https://imgur.com/zi4rrgX
current result: https://jsfiddle.net/RBee/cLsgpa5w/

Answer 1

Add
.subnav-content-subnav{
position: relative;
}
.navbar {
overflow: hidden;
}
.subnav {
overflow: hidden;
float: left;
}
.subnav-content {
display: none;
position: absolute;
background-color: #7E8185;
min-width: 160px;
z-index: 1;
}
.subnav-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: black;
margin: 0;
}
.subnavbtn2x {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: -16px -16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.subnav-content2x {
display: none;
position: absolute;
background-color: #7E8185;
margin-left: 1px;
top: 1%;
left: 100%;
min-width: fit-content;
z-index: 1;
}
.subnav-content2x a {
float: left;
text-decoration: none;
display: block;
text-align: left;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: #7E8185;
}
.subnav:hover .subnav-content {
display: block;
}
.subnav .subnav-content-subnav:hover .subnav-content2x {
display: block;
}
/* ===== Edit ===== */
.subnav-content-subnav{
position: relative;
}
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">First Nav</button>
<div class="subnav-content">
Some page
Some page
Some page
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Second nav</button>
<div class="subnav-content">
<div class="subnav-content-subnav">
<button class="subnavbtn2x">Right first</button>
<div class="subnav-content2x">
Right 1
Right 2
</div>
</div>
<div class="subnav-content-subnav">
<button class="subnavbtn2x">Right Second</button>
<div class="subnav-content2x">
Right 3
Right 4
</div>
</div>
</div>
</div>
</div>
Live preview: https://jsfiddle.net/v41ubmn8/

Answer 2

add .subnav-content-subnav {position: relative;}