I'm currently in the process of developing sub navigation bars that expand upon hover. However, I've encountered an issue where hovering over "Manage" triggers the regular box to expand. This is happening because of the position: relative within .bujar:hover .bujar-content.
When I change the position to absolute, everything works as expected.
However, when resizing the screen, it performs perfectly fine with position: relative, but not with position: absolute on mobile.
If you'd like to see the code in action, here's the link to the CodePen version: https://codepen.io/bujars/pen/BgErzp
.bujar:hover .bujar-content {
position: relative;
display: block;
float: left;
left: 100%;
top: -35px;
}<div class="topnav responsive" id="myTopnav">
<a href="/">Home</a>
<div class="dropdown">
<button class="dropbtn">India<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">Dashboard</a>
<div class="bujar">
<button class="bujar-dropbtn" style="
">Manage<i class="fa fa-caret-right"></i></button>
<div class="bujar-content" style="
/* display: block; */
">
<a href="#">Manage 1</a>
<a href="#">Manage 2</a>
<a href="#">Manage 3</a>
<a href="#">Manage 4</a>
</div>
</div>
<a href="#">x</a>
<a href="#">y</a>
<a href="#">z</a>
<div class="bujar">
<button class="bujar-dropbtn" style="
/* color: red; */
">Manage<i class="fa fa-caret-right"></i></button>
<div class="bujar-content" style="
/* display: block; */
">
<a href="#">Manage 1</a>
<a href="#">Manage 2</a>
<a href="#">Manage 3</a>
<a href="#">Manage 4</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">G<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">D</a>
<a href="#">S2</a>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>