Issue with position and overlapping - css

Question

I've came across an issue while coding my navigation bar. When I hover over a navigation bar element it shows correctly the submenu but the submenu should stay there also when mouse cursor hovers from the element to the submenu. This works correctly if there is no element next to the navigation bar element.
I think it will be easier to explain on an example.
When icon below magnifying glass is hovered it shows the submenu correctly however, when hovered over the submenu it disappears. This does not happen when you hover over the ID card and the corresponding submenu.
I figured out it has to do something with the CSS position element but Im unable to find a solution.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$($(".arrow").parent().parent().parent()).click(function(){
if (!$('.navbar2').hasClass('closed')){
$(this).toggleClass("showMenu")
}
})
$('.navbar2 .logoDetails a').click(function(){
$('.navbar2').toggleClass('closed')
})
$('.navbar2 .search a').click(function(){
if ($('.navbar2').hasClass('closed')){
$('.navbar2').toggleClass('closed')
}
$("#navBarSearch").focus();
})
$('#navBarSearch').on("input", function() {
const searchedValue = $(this).val()
$('.searchResults').empty()
if (searchedValue != '') {
let matches = new Array()
$('.link').each(function(){
const linkText = $(this).text()
if (linkText.toLowerCase().indexOf(searchedValue.toLowerCase()) >= 0 && jQuery.inArray(linkText.toLowerCase(), matches) === -1) {
matches.push(linkText.toLowerCase())
$('.searchResults').append(`<li class="searchResultsItem"><a href='${$(this).attr('href')}'>${linkText}</a></li>`)
}
})
}
})
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
:root {
--dark-primary-color: #11101d;
--dark-secondary-color: #1d1b31;
--dark-text-color: #f6f1d1;
--dark-hoverBG-color: #f6f1d1;
--dark-hoverTX-color: #11101d;
}
.navbar2 {
font-family: 'Poppins', sans-serif;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 260px;
background: var(--dark-primary-color);
transition: all 0.5s ease;
}
.navbar2.closed,
.navbar2.closed .bottomBar {
width: 78px;
}
.navbar2 .logoDetails {
padding-top: 15px;
top: 0;
height: 50px;
width: 100%;
display: flex;
align-items: center;
}
.navbar2 .logoDetails a {
font-size: 30px;
color: var(--dark-text-color);
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
transition: all 0.5s ease;
}
.navbar2 .logoDetails a.collapseIcon {
font-size: 30px;
color: var(--dark-text-color);
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
transition: all 0.5s ease;
}
.navbar2 .logoDetails a.collapseIcon:hover {
background: var(--dark-hoverBG-color);
color: var(--dark-hoverTX-color);
}
.navbar2 .logoDetails .logoName {
font-size: 22px;
color: var(--dark-text-color);
font-weight: 600;
text-decoration: none;
margin-left: 10px;
}
.navbar2.closed .logoDetails .logoName {
display: none;
}
.navbar2 .navLinks {
background: var(--dark-primary-color);
height: 100%;
padding: 15px 0 210px 0;
overflow: auto;
padding-inline-start: 0px!important;
margin-bottom: 0px;
}
.navbar2.closed .navLinks {
overflow: visible;
}
.navbar2 .bottomBar .navLinks {
padding: 0;
}
.navbar2 .navLinks::-webkit-scrollbar {
display: none;
}
.navbar2 .navLinks li {
list-style: none;
position: relative;
transition: all 0.5s ease;
margin-left: 10px;
}
.navbar2.closed .navLinks li {
margin-left: 0px;
}
.navbar2 .navLinks li input {
position: relative;
height: 100%;
width: 100%;
top: 0;
left: 0;
border-radius: 12px;
outline: none;
border: none;
background: var(--dark-secondary-color);
padding-left: 60px;
font-size: 18px;
color: var(--dark-text-color);
transition: all 0.5s ease;
}
.navbar2.closed .navLinks li input {
display: none;
}
.navbar2 .navLinks li .fa-search {
position: absolute;
z-index: 99;
color: var(--dark-text-color);
font-size: 22px;
transition: all 0.5s ease;
}
.navbar2.closed .navLinks li .fa-search:hover {
background: var(--dark-hoverBG-color);
color: var(--dark-hoverTX-color);
}
.navbar2 .navLinks ul.searchResults {
position: absolute;
width: 100%;
padding-left: 0px;
border: 1px solid var(--dark-hoverTX-color);
}
.navbar2 .navLinks ul.searchResults .searchResultsItem {
padding: .75rem 1.25rem;
margin-left: 0px;
background-color: var(--dark-hoverBG-color);
border: 1px solid var(--dark-hoverTX-color);
border-radius: 6px 6px 6px 6px;
z-index: 1;
width: 100%;
}
.navbar2 .navLinks ul.searchResults .searchResultsItem a {
color: var(--dark-hoverTX-color);
}
.navbar2 .navLinks ul.searchResults .searchResultsItem:hover {
background-color: var(--dark-primary-color);
color: var(--dark-text-color);
border: 1px solid var(--dark-hoverBG-color);
}
.navbar2 .navLinks ul.searchResults .searchResultsItem:hover a {
color: var(--dark-text-color);
}
.navbar2.closed .navLinks ul.searchResults,
.navbar2.closed .navLinks ul.searchResults .searchResultsItem {
display: none;
}
.navbar2 .navLinks li:hover {
background: var(--dark-secondary-color);
}
.navbar2 .navLinks li .iconLink {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.navbar2 .navLinks li .iconLink.search {
height: 50px;
margin-bottom: 10px;
}
.navbar2 .navLinks li i {
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: var(--dark-text-color);
font-size: 20px;
transition: all 0.3s ease;
}
.navbar2 .navLinks li.showMenu i.arrow {
transform: rotate(-180deg);
}
.navbar2.closed .navLinks i.arrow {
display: none;
}
.navbar2 .navLinks li a {
display: flex;
align-items: center;
text-decoration: none;
}
.navbar2 .navLinks li .linkName {
font-size: 18px;
font-weight: 400;
color: var(--dark-text-color);
}
.navbar2 .navLinks li .subMenu {
padding-inline-start: 0px;
padding: 6px 0px 0px 78px;
margin-top: -10px;
background-color: var(--dark-secondary-color);
display: none;
transition: all 0.3s ease;
}
.navbar2 .navLinks li .subMenu li {
margin: 0px;
}
.navbar2 .navLinks li.showMenu .subMenu {
display: block;
transition: all 0.3s ease;
}
.navbar2 .navLinks li .subMenu a {
color: var(--dark-text-color);
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
}
.navbar2 .navLinks li .subMenu a:hover {
opacity: 1;
}
.navbar2.closed .navLinks li a .linkName {
display: none;
}
.navbar2.closed .navLinks li .subMenu {
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
transition: all 0.5s ease;
opacity: 0;
display: block;
pointer-events: none;
z-index: 999;
}
.navbar2.closed .navLinks li:hover .subMenu {
top: 0;
opacity: 1;
pointer-events: auto;
}
.navbar2 .navLinks li .subMenu .linkName {
display: none;
}
.navbar2.closed .navLinks li .subMenu .linkName {
font-size: 18px;
opacity: 1;
display: block;
}
.navbar2 .navLinks li .subMenu.blank {
opacity: 0;
pointer-events: none;
}
.navbar2.closed .navLinks li:hover .subMenu.blank {
top: 50%;
transform: translateY(-50%);
display: block;
}
.navbar2 .bottomBar {
border-top: 1px solid var(--dark-text-color);
position: fixed;
bottom: 0;
width: 260px;
transition: all 0.5s ease;
}
.mainSection {
position: absolute;
left: 260px;
width: calc(100% - 260px);
transition: all 0.5s ease;
}
.navbar2.closed ~ .mainSection {
left: 78px;
width: calc(100% - 78px);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div class="navbar2 closed">
<div class="logoDetails">
<i class="bi bi-list"></i>
<a href="{{ url_for('home.index') }}" class="logoName">
Test
</a>
</div>
<ul class="navLinks">
<li>
<div class="iconLink search">
<i class="fas fa-search"></i>
<input id="navBarSearch" type="text" placeholder="Search...">
</div>
<ul class="searchResults">
</ul>
</li>
<li>
<div class="iconLink">
<a href="#">
<i class="far fa-clone"></i>
<span class="linkName">Test1</span>
</a>
<i class="fas fa-chevron-down arrow"></i>
</div>
<ul class="subMenu">
<li><a class="linkName" href="#">Test1</a></li>
<li><a class="link" href="#">Test1.1</a></li>
<li><a class="link" href="#">Test1.2</a></li>
</ul>
</li>
<li>
<div class="iconLink">
<a href="#"><i class="fas fa-address-card"></i><span class="linkName">Test2</span>
</a>
<i class="fas fa-chevron-down arrow"></i>
</div>
<ul class="subMenu">
<li><a class="linkName" href="#">Test2</a></li>
<li><a class="link" href="#">Test2.1</a></li>
<li><a class="link" href="#">Test2.2</a></li>
</ul>
</li>
</ul>
<div class="bottomBar">
<ul class="navLinks">
<li>
<a href="#">
<i class="fas fa-bug"></i>
<span class="linkName">Report an issue</span>
</a>
<ul class="subMenu blank">
<li><a class="linkName" href="#">Report an issue</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-hammer"></i>
<span class="linkName">Feature request</span>
</a>
<ul class="subMenu blank">
<li><a class="linkName" href="#">Feature request</a></li>
</ul>
</li>
</ul>
</div>
</div>
<section class="mainSection">
<p> Test Text</p>
<p> Test Text</p>
<p> Test Text</p>
<p> Test Text</p>
<p> Test Text</p>
<p> Test Text</p>
</section>

Answer 1

The mainsection is being drawn above navbar2, so when you move the mouse over mainsection that will take the focus.
To solve this, you would just make sure the navbar2 is considered to be higher by putting something like z-index: 10000 into the CSS rules for that.
Like so:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$($(".arrow").parent().parent().parent()).click(function(){
if (!$('.navbar2').hasClass('closed')){
$(this).toggleClass("showMenu")
}
})
$('.navbar2 .logoDetails a').click(function(){
$('.navbar2').toggleClass('closed')
})
$('.navbar2 .search a').click(function(){
if ($('.navbar2').hasClass('closed')){
$('.navbar2').toggleClass('closed')
}
$("#navBarSearch").focus();
})
$('#navBarSearch').on("input", function() {
const searchedValue = $(this).val()
$('.searchResults').empty()
if (searchedValue != '') {
let matches = new Array()
$('.link').each(function(){
const linkText = $(this).text()
if (linkText.toLowerCase().indexOf(searchedValue.toLowerCase()) >= 0 && jQuery.inArray(linkText.toLowerCase(), matches) === -1) {
matches.push(linkText.toLowerCase())
$('.searchResults').append(`<li class="searchResultsItem"><a href='${$(this).attr('href')}'>${linkText}</a></li>`)
}
})
}
})
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
:root {
--dark-primary-color: #11101d;
--dark-secondary-color: #1d1b31;
--dark-text-color: #f6f1d1;
--dark-hoverBG-color: #f6f1d1;
--dark-hoverTX-color: #11101d;
}
.navbar2 {
font-family: 'Poppins', sans-serif;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 260px;
background: var(--dark-primary-color);
transition: all 0.5s ease;
z-index: 10000; /*** ADDED THIS LINE ***/
}
.navbar2.closed,
.navbar2.closed .bottomBar {
width: 78px;
}
.navbar2 .logoDetails {
padding-top: 15px;
top: 0;
height: 50px;
width: 100%;
display: flex;
align-items: center;
}
.navbar2 .logoDetails a {
font-size: 30px;
color: var(--dark-text-color);
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
transition: all 0.5s ease;
}
.navbar2 .logoDetails a.collapseIcon {
font-size: 30px;
color: var(--dark-text-color);
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
transition: all 0.5s ease;
}
.navbar2 .logoDetails a.collapseIcon:hover {
background: var(--dark-hoverBG-color);
color: var(--dark-hoverTX-color);
}
.navbar2 .logoDetails .logoName {
font-size: 22px;
color: var(--dark-text-color);
font-weight: 600;
text-decoration: none;
margin-left: 10px;
}
.navbar2.closed .logoDetails .logoName {
display: none;
}
.navbar2 .navLinks {
background: var(--dark-primary-color);
height: 100%;
padding: 15px 0 210px 0;
overflow: auto;
padding-inline-start: 0px!important;
margin-bottom: 0px;
}
.navbar2.closed .navLinks {
overflow: visible;
}
.navbar2 .bottomBar .navLinks {
padding: 0;
}
.navbar2 .navLinks::-webkit-scrollbar {
display: none;
}
.navbar2 .navLinks li {
list-style: none;
position: relative;
transition: all 0.5s ease;
margin-left: 10px;
}
.navbar2.closed .navLinks li {
margin-left: 0px;
}
.navbar2 .navLinks li input {
position: relative;
height: 100%;
width: 100%;
top: 0;
left: 0;
border-radius: 12px;
outline: none;
border: none;
background: var(--dark-secondary-color);
padding-left: 60px;
font-size: 18px;
color: var(--dark-text-color);
transition: all 0.5s ease;
}
.navbar2.closed .navLinks li input {
display: none;
}
.navbar2 .navLinks li .fa-search {
position: absolute;
z-index: 99;
color: var(--dark-text-color);
font-size: 22px;
transition: all 0.5s ease;
}
.navbar2.closed .navLinks li .fa-search:hover {
background: var(--dark-hoverBG-color);
color: var(--dark-hoverTX-color);
}
.navbar2 .navLinks ul.searchResults {
position: absolute;
width: 100%;
padding-left: 0px;
border: 1px solid var(--dark-hoverTX-color);
}
.navbar2 .navLinks ul.searchResults .searchResultsItem {
padding: .75rem 1.25rem;
margin-left: 0px;
background-color: var(--dark-hoverBG-color);
border: 1px solid var(--dark-hoverTX-color);
border-radius: 6px 6px 6px 6px;
z-index: 1;
width: 100%;
}
.navbar2 .navLinks ul.searchResults .searchResultsItem a {
color: var(--dark-hoverTX-color);
}
.navbar2 .navLinks ul.searchResults .searchResultsItem:hover {
background-color: var(--dark-primary-color);
color: var(--dark-text-color);
border: 1px solid var(--dark-hoverBG-color);
}
.navbar2 .navLinks ul.searchResults .searchResultsItem:hover a {
color: var(--dark-text-color);
}
.navbar2.closed .navLinks ul.searchResults,
.navbar2.closed .navLinks ul.searchResults .searchResultsItem {
display: none;
}
.navbar2 .navLinks li:hover {
background: var(--dark-secondary-color);
}
.navbar2 .navLinks li .iconLink {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.navbar2 .navLinks li .iconLink.search {
height: 50px;
margin-bottom: 10px;
}
.navbar2 .navLinks li i {
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: var(--dark-text-color);
font-size: 20px;
transition: all 0.3s ease;
}
.navbar2 .navLinks li.showMenu i.arrow {
transform: rotate(-180deg);
}
.navbar2.closed .navLinks i.arrow {
display: none;
}
.navbar2 .navLinks li a {
display: flex;
align-items: center;
text-decoration: none;
}
.navbar2 .navLinks li .linkName {
font-size: 18px;
font-weight: 400;
color: var(--dark-text-color);
}
.navbar2 .navLinks li .subMenu {
padding-inline-start: 0px;
padding: 6px 0px 0px 78px;
margin-top: -10px;
background-color: var(--dark-secondary-color);
display: none;
transition: all 0.3s ease;
}
.navbar2 .navLinks li .subMenu li {
margin: 0px;
}
.navbar2 .navLinks li.showMenu .subMenu {
display: block;
transition: all 0.3s ease;
}
.navbar2 .navLinks li .subMenu a {
color: var(--dark-text-color);
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
}
.navbar2 .navLinks li .subMenu a:hover {
opacity: 1;
}
.navbar2.closed .navLinks li a .linkName {
display: none;
}
.navbar2.closed .navLinks li .subMenu {
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
transition: all 0.5s ease;
opacity: 0;
display: block;
pointer-events: none;
z-index: 999;
}
.navbar2.closed .navLinks li:hover .subMenu {
top: 0;
opacity: 1;
pointer-events: auto;
}
.navbar2 .navLinks li .subMenu .linkName {
display: none;
}
.navbar2.closed .navLinks li .subMenu .linkName {
font-size: 18px;
opacity: 1;
display: block;
}
.navbar2 .navLinks li .subMenu.blank {
opacity: 0;
pointer-events: none;
}
.navbar2.closed .navLinks li:hover .subMenu.blank {
top: 50%;
transform: translateY(-50%);
display: block;
}
.navbar2 .bottomBar {
border-top: 1px solid var(--dark-text-color);
position: fixed;
bottom: 0;
width: 260px;
transition: all 0.5s ease;
}
.mainSection {
position: absolute;
left: 260px;
width: calc(100% - 260px);
transition: all 0.5s ease;
}
.navbar2.closed ~ .mainSection {
left: 78px;
width: calc(100% - 78px);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div class="navbar2 closed">
<div class="logoDetails">
<i class="bi bi-list"></i>
<a href="{{ url_for('home.index') }}" class="logoName">
Test
</a>
</div>
<ul class="navLinks">
<li>
<div class="iconLink search">
<i class="fas fa-search"></i>
<input id="navBarSearch" type="text" placeholder="Search...">
</div>
<ul class="searchResults">
</ul>
</li>
<li>
<div class="iconLink">
<a href="#">
<i class="far fa-clone"></i>
<span class="linkName">Test1</span>
</a>
<i class="fas fa-chevron-down arrow"></i>
</div>
<ul class="subMenu">
<li><a class="linkName" href="#">Test1</a></li>
<li><a class="link" href="#">Test1.1</a></li>
<li><a class="link" href="#">Test1.2</a></li>
</ul>
</li>
<li>
<div class="iconLink">
<a href="#"><i class="fas fa-address-card"></i><span class="linkName">Test2</span>
</a>
<i class="fas fa-chevron-down arrow"></i>
</div>
<ul class="subMenu">
<li><a class="linkName" href="#">Test2</a></li>
<li><a class="link" href="#">Test2.1</a></li>
<li><a class="link" href="#">Test2.2</a></li>
</ul>
</li>
</ul>
<div class="bottomBar">
<ul class="navLinks">
<li>
<a href="#">
<i class="fas fa-bug"></i>
<span class="linkName">Report an issue</span>
</a>
<ul class="subMenu blank">
<li><a class="linkName" href="#">Report an issue</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-hammer"></i>
<span class="linkName">Feature request</span>
</a>
<ul class="subMenu blank">
<li><a class="linkName" href="#">Feature request</a></li>
</ul>
</li>
</ul>
</div>
</div>
<section class="mainSection">
<p> Test Text</p>
<p> Test Text</p>
<p> Test Text</p>
<p> Test Text</p>
<p> Test Text</p>
<p> Test Text</p>
</section>