Horizontal nav with horizontal submenu - vanishing underline - html

Question

I have been asked to make horizontal navbar with a horizontal submenu as well. This behaves differently than the typical navbar, and the main issue I cannot solve is when I hover an item in the nav, it underlines and displays the submenu correctly. When I move the cursor to the submenu though, the underline disappears. I cannot figure out how to keep it underlined while mousing about the submenu.
HTML:
<!-- Beginning of Header -->
<div class='menu-container'>
<div class='menu'>
<div class='logo'>
<img
src="/images/logo.svg"
alt="Pershing's Own"
height="100"
width="150" />
</div>
<div class='calendar'>Calendar</div>
<div class='feedback'>Give Feedback</div>
<div class='tickets'><a class='red-button' href='https://www.eventbrite.com/o/the-us-army-band-pershings-own-2494510190'>Tickets</a></div>
</div>
</div>
<div class='header-container'>
<nav class='nav-container' role='navigation'>
<ul class='nav-menu'>
<li class='dropdown' tabindex='-1'>
Concerts & Events
<ul class='red-submenu'> <!-- Start of submenu -->
<li><a href='/event-page/event-page.html'>Concerts</a></li>
<li><a href='#'>Special Events</a></li>
<li><a href='#'>Twilight Tattoo</a></li>
<li><a href='#'>Workshops</a></li>
</ul> <!-- End of submenu -->
</li>
<li class='dropdown' tabindex='-1'>
Vacancies
<ul class='red-submenu'> <!-- Start of submenu -->
<li><a href='#'>Current Openings</a></li>
<li><a href='#'>Conducting</a></li>
<li><a href='#'>Other Army Opportunities</a></li>
</ul>
</li>
<li class='dropdown' tabindex='-1'>
Watch & Listen
<ul class='red-submenu'> <!-- Start of submenu -->
<li><a href='#'>Live Webcasts</a></li>
<li><a href='#'>YouTube Channel</a></li>
<li><a href='#'>Recordings</a></li>
</ul>
</li>
<li class='dropdown' tabindex='-1'>
Meet the Band
<ul class='red-submenu'> <!-- Start of submenu -->
<li><a href='/meet-the-band/soldiers.html'>Musicians</a></li>
<li><a href='/meet-the-band/ensembles.html'>Ensembles</a></li>
<li><a href='#'>Support Staff</a></li>
<li><a href='#'>Command Staff</a></li>
</ul>
</li>
<li class='dropdown' tabindex='-1'>
Engagement
<ul class='red-submenu'>
<li><a href='#'>Workshops</a></li>
<li><a href='#'>Competitions</a></li>
<li><a href='#'>Educational Outreach</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- End of Header -->
CSS:
body {
width: 1200px;
margin: 0 auto;
}
.nav-container {
color: #0C275B;
display: flex;
font-weight: 700;
justify-content: center;
}
nav {
width: 100%;
height: 75px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-menu {
display: flex;
align-self: flex-end;
margin-bottom: 0px;
padding-left: 180px;
justify-content: space-evenly;
text-transform: uppercase;
font-size: 0.9em;
width: inherit;
}
.nav-menu a:link {
text-decoration: none;
color: #0C275B;
}
.nav-menu a:visited {
text-decoration: none;
color: #0C275B;
}
.nav-menu li {
display: inline;
padding-left: 0;
}
.nav-menu:focus {
pointer-events:none;
}
.dropdown a {
text-decoration: none;
font-size: 1em;
position: relative;
transition: all 0.6s;
}
.dropdown a:after {
content: '';
width: 0;
height: 0.3em;
position: absolute;
bottom: -5px;
left: 50%;
background: #0C275B;
transition: all 0.5s;
}
.dropdown a:hover:after {
width: 100%;
left: 0;
background: #C31F3C;
}
.red-submenu {
padding-left: 25%;
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
border-top: solid white 0.5rem;
left: 0;
text-transform: none;
}
.red-submenu li {
padding-left: 80px;
}
.dropdown:active .red-submenu,
.dropdown:focus .red-submenu,
.dropdown:hover > .red-submenu,
.red-submenu:hover {
visibility: visible;
opacity: 1;
background-color: #C31F3C;
display: block;
width: 100%;
}
ul li ul li {
clear: both;
width: 100%;
}
.red-submenu a:link {
text-decoration: none;
color: #FFF;
}
.red-submenu a:visited {
text-decoration: none;
color: #FFF;
}
.red-submenu li a:hover:after {
width: 0%;
background: #C31F3C;
}
body {
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 1.8em;
color: #0C275B;
}
.menu-container {
color: #0C275B;
padding: 20px 0;
display: flex;
justify-content: center;
height: 60px;
}
.menu {
width: 100%;
display: flex;
justify-content: space-between;
font-size: 0.9em;
font-weight: 700;
}
.calendar {
margin-left: auto;
}
.feedback,
.tickets {
margin-left: 20px;
}
.tickets {
padding-right: 20px;
}
a.red-button {
color: #FFF;
background-color: #C31F3C;
font-family: 'Raleway', sans-serif;
font-weight: 700;
padding: 5px 10px 5px 10px;
height: 2.1em;
text-align: center;
border-radius: 10px;
text-decoration: none;
}
.logo {
width: 150px;
display: flex;
padding-left: 20px;
justify-content: flex-start;
}
I created a codepen here.
Menu has no JS - only HTML and CSS. If JS would solve this, that would be fine, but if there's a way to do it with just HTML and CSS, that would be preferable.

Answer 1

You should put the :hover on the li.dropdown element. So replace .dropdown a:hover:after with .dropdown:hover > a::after.
// Before
.dropdown a:hover:after {
width: 100%;
left: 0;
background: #C31F3C;
}
// After
.dropdown:hover > a::after {
width: 100%;
left: 0;
background: #C31F3C;
}
body {
width: 1200px;
margin: 0 auto;
}
.nav-container {
color: #0C275B;
display: flex;
font-weight: 700;
justify-content: center;
}
nav {
width: 100%;
height: 75px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-menu {
display: flex;
align-self: flex-end;
margin-bottom: 0px;
padding-left: 180px;
justify-content: space-evenly;
text-transform: uppercase;
font-size: 0.9em;
width: inherit;
}
.nav-menu a:link {
text-decoration: none;
color: #0C275B;
}
.nav-menu a:visited {
text-decoration: none;
color: #0C275B;
}
.nav-menu li {
display: inline;
padding-left: 0;
}
.nav-menu:focus {
pointer-events:none;
}
.dropdown a {
text-decoration: none;
font-size: 1em;
position: relative;
transition: all 0.6s;
}
.dropdown a:after {
content: '';
width: 0;
height: 0.3em;
position: absolute;
bottom: -5px;
left: 50%;
background: #0C275B;
transition: all 0.5s;
}
.dropdown:hover > a::after {
width: 100%;
left: 0;
background: #C31F3C;
}
.red-submenu {
padding-left: 25%;
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
border-top: solid white 0.5rem;
left: 0;
text-transform: none;
}
.red-submenu li {
padding-left: 80px;
}
.dropdown:active .red-submenu,
.dropdown:focus .red-submenu,
.dropdown:hover > .red-submenu,
.red-submenu:hover {
visibility: visible;
opacity: 1;
background-color: #C31F3C;
display: block;
width: 100%;
}
ul li ul li {
clear: both;
width: 100%;
}
.red-submenu a:link {
text-decoration: none;
color: #FFF;
}
.red-submenu a:visited {
text-decoration: none;
color: #FFF;
}
.red-submenu li a:hover:after {
width: 0%;
background: #C31F3C;
}
body {
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 1.8em;
color: #0C275B;
}
.menu-container {
color: #0C275B;
padding: 20px 0;
display: flex;
justify-content: center;
height: 60px;
}
.menu {
width: 100%;
display: flex;
justify-content: space-between;
font-size: 0.9em;
font-weight: 700;
}
.calendar {
margin-left: auto;
}
.feedback,
.tickets {
margin-left: 20px;
}
.tickets {
padding-right: 20px;
}
a.red-button {
color: #FFF;
background-color: #C31F3C;
font-family: 'Raleway', sans-serif;
font-weight: 700;
padding: 5px 10px 5px 10px;
height: 2.1em;
text-align: center;
border-radius: 10px;
text-decoration: none;
}
.logo {
width: 150px;
display: flex;
padding-left: 20px;
justify-content: flex-start;
}
<!-- Beginning of Header -->
<div class='menu-container'>
<div class='menu'>
<div class='logo'>
<img
src="/images/logo.svg"
alt="Pershing's Own"
height="100"
width="150" />
</div>
<div class='calendar'>Calendar</div>
<div class='feedback'>Give Feedback</div>
<div class='tickets'><a class='red-button' href='https://www.eventbrite.com/o/the-us-army-band-pershings-own-2494510190'>Tickets</a></div>
</div>
</div>
<div class='header-container'>
<nav class='nav-container' role='navigation'>
<ul class='nav-menu'>
<li class='dropdown' tabindex='-1'>
Concerts & Events
<ul class='red-submenu'> <!-- Start of submenu -->
<li><a href='/event-page/event-page.html'>Concerts</a></li>
<li><a href='#'>Special Events</a></li>
<li><a href='#'>Twilight Tattoo</a></li>
<li><a href='#'>Workshops</a></li>
</ul> <!-- End of submenu -->
</li>
<li class='dropdown' tabindex='-1'>
Vacancies
<ul class='red-submenu'> <!-- Start of submenu -->
<li><a href='#'>Current Openings</a></li>
<li><a href='#'>Conducting</a></li>
<li><a href='#'>Other Army Opportunities</a></li>
</ul>
</li>
<li class='dropdown' tabindex='-1'>
Watch & Listen
<ul class='red-submenu'> <!-- Start of submenu -->
<li><a href='#'>Live Webcasts</a></li>
<li><a href='#'>YouTube Channel</a></li>
<li><a href='#'>Recordings</a></li>
</ul>
</li>
<li class='dropdown' tabindex='-1'>
Meet the Band
<ul class='red-submenu'> <!-- Start of submenu -->
<li><a href='/meet-the-band/soldiers.html'>Musicians</a></li>
<li><a href='/meet-the-band/ensembles.html'>Ensembles</a></li>
<li><a href='#'>Support Staff</a></li>
<li><a href='#'>Command Staff</a></li>
</ul>
</li>
<li class='dropdown' tabindex='-1'>
Engagement
<ul class='red-submenu'>
<li><a href='#'>Workshops</a></li>
<li><a href='#'>Competitions</a></li>
<li><a href='#'>Educational Outreach</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- End of Header -->
<!-- Begin main section -->
<div class='main-container'>
</div>