I'm working on a side navigation menu for my website using a bootstrap template. I'm a designer, not a developer, but I'm trying to learn by doing. I got everything working right, mostly. But I can't figure out why when I hover over the first or second menu items, the third one is expanded.
It's a parent for a submenu, but I've tried removing CSS rules one by one to see if that changes or fixes anything, but it doesn't seem to be working. Here is a link to the codepen that has bootstrap already loaded.
https://codepen.io/steve-mullen/pen/WNgNBjE
<html lang="en">
<body>
<header id="header" class="d-flex flex-column justify-content-center">
<nav id="navbar" class="navbar nav-menu">
<ul class="main-nav">
<li class="no-sub-nav"><a href="#home" class="scrollto active">1<span>Menu 1</span></a></li>
<li class="no-sub-nav"><a href="#about" class="scrollto">2<span>Menu 2</span></a></li>
<li class="has-sub-nav"><a href="#portfolio" class="scrollto">3<span>Menu 3</span></a>
<ul class="sub-nav">
<li><a href=""><span>Sub 1</span></a></li>
<li><a href=""><span>Sub 2</span></a></li>
<li><a href=""><span>Sub 3</span></a></li>
<li><a href=""><span>Sub 4</span></a></li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
body {
font-family: "Open Sans", sans-serif;
color: #272829;
}
a {
color: #0563bb;
text-decoration: none;
}
a:hover {
color: #067ded;
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 9997;
transition: all 0.5s;
padding: 15px;
overflow-y: auto;
}
@media (max-width: 991px) {
#header {
width: 300px;
background: #fff;
border-right: 1px solid #e6e9ec;
left: -300px;
}
}
/* Main Nav */
.nav-menu {
padding: 0;
display: block;
position: relative;
}
.nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: relative;
white-space: nowrap;
}
.no-sub-nav a,
.no-sub-nav a:focus {
display: flex;
align-items: center;
color: rgba(26,26,26,1.00);
padding: 10px 18px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
}
.nav-menu a {
border: 4px #1a1a1a solid;
}
.nav-menu a i,
.nav-menu a:focus i {
font-size: 20px;
}
.nav-menu a span,
.nav-menu a:focus span {
padding: 0 5px 0 5px;
color: #1a1a1a;
}
@media (min-width: 992px) {
.nav-menu a,
.nav-menu a:focus {
width: 56px;
}
.nav-menu a span,
.nav-menu a:focus span {
display: none;
color: #fff;
}
.nav-menu li {
padding: 0;
}
.sub-nav {
display:none;
position: absolute;
}
.has-sub-nav:hover .sub-nav {
display: block;
transition: 0.3 sec;
position: absolute;
margin: 0;
width:100%;
padding-top: 8px;
padding-left:15px;
}
}
.nav-menu a:hover,
.nav-menu .active,
.nav-menu .active:focus,
.nav-menu:hover>a {
color: #fff;
background: #1a1a1a;
border: 4px white solid;
padding: 0 18px;
}
.nav-menu a:hover span,
.nav-menu .active span,
.nav-menu .active:focus span,
.nav-menu:hover>a span {
color: #fff;
}
.no-sub-nav a:hover,
.no-sub-nav:hover>a {
width: 100%;
color: #fff;
}
.no-sub-nav a:hover span,
.no-sub-nav:hover>a span{
display: block;
}
/* Sub Nav */
.has-sub-nav {
padding: 0;
display: block;
position: relative;
}
.has-sub-nav * {
margin: 0;
padding: 0;
list-style: none;
}
.has-sub-nav ul {
position: relative;
white-space: nowrap;
}
.no-sub-nav {
margin-bottom: 8px;
}
.has-sub-nav li {
padding-bottom:8px;
}
.has-sub-nav a,
.has-sub-nav a:focus {
display: flex;
align-items: center;
color: rgba(26,26,26,1.00);
padding: 10px 18px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
}
.has-sub-nav a {
border: 4px #1a1a1a solid;
}
.has-sub-nav a span,
.has-sub-nav a:focus span {
padding: 0 5px 0 5px;
color: #1a1a1a;
}
.has-sub-nav a:hover,
.has-sub-nav .active,
.has-sub-nav .active:focus,
.has-sub-nav:hover>a {
color: #fff;
background: #1a1a1a;
border: 4px white solid;
padding: 0 18px;
}
.has-sub-nav a:hover span,
.has-sub-nav .active span,
.has-sub-nav .active:focus span,
.has-sub-nav:hover>a span {
color: #fff;
}
.has-sub-nav a:hover,
.has-sub-nav:hover>a {
width: 100%;
color: #fff;
}
.has-sub-nav a:hover span,
.has-sub-nav:hover>a span{
display: block;
}
I found the issue in your CSS, you just need to remove the width: 100% in
.has-sub-nav a,
.has-sub-nav a:focus
and it will works as normal.
This is because the width:100% make the 3rd menu to fit to its container's(ul) width, so whenenver 1st or 2nd menu is expanding, ul is expanding and cause 3rd to following its parent width then cause the issue.