I'm using a bootstrap template and trying to create a submenu for the third menu item that will display four sub-items. For one, I can't get them to display properly, and I can't get them to stay open to hover over them. I'm a designer, not a developer, but I'm trying to learn a little. Can anyone tell me what I'm doing wrong?
I've looked through numerous Q&A's on here, but none seem to work for me. Ideally, I would like the submenu items to be dots that expand when you hover over the parent. I tried that at first, and almost got it, but they would close before I could hover over them, and they wouldn't open when you hovered over the parent. I feel like I'm close, but I've been working at this for the entire day.
<html>
<body>
<header id="header" class="d-flex flex-column justify-content-center">
<nav id="navbar" class="navbar nav-menu">
<ul class="main-nav">
<li><a href="#home" class="scrollto active">H<span>Home</span></a></li>
<li><a href="#about" class="scrollto">A<span>About</span></a></li>
<li><a href="#portfolio" class="scrollto">P<span>Portfolio</span></a>
<ul class="nav-sub">
<li><a href="/loupe2.html"><span>Sub 1</span></a></li>
<li><a href="/apexdrop2.html"><span>Sub 2</span></a></li>
<li><a href="/coursework.html"><span>Sub 3</span></a></li>
<li><a href="/other.html"><span>Sub 4</span></a></li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
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;
}
.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;
}
.nav-menu a,
.nav-menu a:focus {
display: flex;
align-items: center;
color: rgba(26, 26, 26, 1);
padding: 10px 18px;
margin-bottom: 8px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
}
.nav-menu a {
border: 4px #1a1a1a solid;
padding-left: 15px !important;
}
.nav-menu a span,
.nav-menu a:focus span {
padding: 0 5px 0 5px;
color: #1a1a1a;
display: none;
}
.nav-sub li,
.nav-sub li:focus {
display: none;
}
.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 20px;
}
.nav-menu a:hover span,
.nav-menu .active span,
.nav-menu .active:focus span,
.nav-menu:hover > a span {
color: #fff;
}
.nav-menu a:hover,
.nav-menu:hover > a {
width: 100%;
color: #fff;
}
.nav-menu a:hover span,
.nav-menu:hover > a span {
display: block;
}
.main-nav > li:hover .nav-sub {
position: absolute;
width: 100%;
opacity: 1;
margin-bottom: 8px;
display: block;
}
.main-nav > li:hover .nav-sub li span {
width: 100%;
}
.nav-sub {
margin-bottom: 8px;
padding: 0;
position: absolute;
display: none;
width: 100%;
height: auto;
text-align: center;
opacity: 0;
transition: all 0.5s;
}
.nav-sub li {
display: flex;
margin: 0;
width: 100%;
}
The main reason was a margin-bottom: 8px on the last a tag, so there is a gap between the menu item and sub-menu. I made a quick fix for this issue. But there is still a lot of work to do.
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;
}
.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;
}
.nav-menu a,
.nav-menu a:focus {
display: flex;
align-items: center;
color: rgba(26, 26, 26, 1);
padding: 10px 18px;
margin-bottom: 8px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
}
.nav-menu .has-nav-sub a,
.nav-menu .has-nav-sub a:focus {
margin-bottom: 0px;
}
.nav-menu a {
border: 4px #1a1a1a solid;
padding-left: 15px !important;
}
.nav-menu a span,
.nav-menu a:focus span {
padding: 0 5px 0 5px;
color: #1a1a1a;
display: none;
}
.nav-sub li,
.nav-sub li:focus {
display: none;
}
.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 20px;
}
.nav-menu a:hover span,
.nav-menu .active span,
.nav-menu .active:focus span,
.nav-menu:hover>a span {
color: #fff;
}
.nav-menu a:hover,
.nav-menu:hover>a {
width: 100%;
color: #fff;
}
.nav-menu a:hover span,
.nav-menu:hover>a span {
display: block;
}
.main-nav>li:hover .nav-sub {
position: absolute;
width: 100%;
opacity: 1;
display: block;
}
.main-nav>li:hover .nav-sub li span {
width: 100%;
}
.nav-sub {
padding: 0;
position: absolute;
display: none;
width: 100%;
height: auto;
text-align: center;
opacity: 0;
transition: all 0.5s;
}
.nav-sub li {
display: flex;
margin: 0;
width: 100%;
}<html>
<body>
<header id="header" class="d-flex flex-column justify-content-center">
<nav id="navbar" class="navbar nav-menu">
<ul class="main-nav">
<li><a href="#home" class="scrollto active">H<span>Home</span></a></li>
<li><a href="#about" class="scrollto">A<span>About</span></a></li>
<li class="has-nav-sub"><a href="#portfolio" class="scrollto">P<span>Portfolio</span></a>
<ul class="nav-sub">
<li><a href="/loupe2.html"><span>Sub 1</span></a></li>
<li><a href="/apexdrop2.html"><span>Sub 2</span></a></li>
<li><a href="/coursework.html"><span>Sub 3</span></a></li>
<li><a href="/other.html"><span>Sub 4</span></a></li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>