Html 带水平子菜单的水平导航-消失下划线

我被要求制作带有水平子菜单的水平导航栏。这与典型的导航栏的行为不同，我无法解决的主要问题是，当我将项目悬停在导航栏中时，它会在子菜单上加下划线并正确显示。但当我将光标移动到子菜单时，下划线消失。在子菜单上滑动鼠标时，我不知道如何使其保持下划线

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'>

                 <a href="#">Concerts & Events</a>
                  <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'>
                  <a href="#">Vacancies</a>
                  <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'>
                  <a href="#">Watch & Listen</a>
                  <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'>
                  <a href="#">Meet the Band</a>
                  <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'>
                <a href="#">Engagement</a>
                  <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 -->

我创造了一个

---

菜单没有JS，只有HTML和CSS。如果JS能够解决这个问题，那就好了，但是如果有一种方法可以只用HTML和CSS来解决这个问题，那就更好了

您应该将

：悬停

放在

li.下拉列表

元素上。因此，用

替换
。下拉菜单a:hover:after
。下拉菜单a:hover>after

// Before
.dropdown a:hover:after {
  width: 100%;
  left: 0;
  background:  #C31F3C;
}

// After 
.dropdown:hover > a::after {
  width: 100%;
  left: 0;
  background:  #C31F3C;
}

正文{
宽度：1200px；
保证金：0自动；
}
.导航集装箱{
颜色：#0C275B；
显示器：flex；
字号：700；
证明内容：中心；
}
导航{
宽度：100%；
高度：75px；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
.导航菜单{
显示器：flex；
自对准：柔性端；
边缘底部：0px；
左侧填充：180px；
对正内容：空间均匀；
文本转换：大写；
字号：0.9em；
宽度：继承；
}
.nav菜单a：链接{
文字装饰：无；
颜色：#0C275B；
}
.导航菜单a：已访问{
文字装饰：无；
颜色：#0C275B；
}
.导航菜单李{
显示：内联；
左侧填充：0；
}
.nav菜单：焦点{
指针事件：无；
}
.下载{
文字装饰：无；
字号：1em；
位置：相对位置；
过渡：均为0.6s；
}
.下拉菜单a:之后{
内容：''；
宽度：0；
高度：0.3em；
位置：绝对位置；
底部：-5px；
左：50%；
背景：#0C275B；
过渡：均为0.5s；
}
.下拉列表：悬停>a:：之后{
宽度：100%；
左：0；
背景：#C31F3C；
} 
.红色子菜单{
左：25%；
可见性：隐藏；
不透明度：0；
位置：绝对位置；
过渡：所有0.5s缓解；
边框顶部：纯白0.5rem；
左：0；
文本转换：无；
}
.红色子菜单li{
左侧填充：80px；
}
.下拉菜单：激活的.红色子菜单，
.下拉菜单：焦点.红色子菜单，
.下拉菜单：悬停>红色子菜单，
.红色子菜单：悬停{
能见度：可见；
不透明度：1；
背景色：#C31F3C；
显示：块；
宽度：100%；
} 
ulli ulli{
明确：两者皆有；
宽度：100%；
}
.红色子菜单a：链接{
文字装饰：无；
颜色：#FFF；
}
.红色子菜单a：已访问{
文字装饰：无；
颜色：#FFF；
}
.红色子菜单li a:悬停：之后{
宽度：0%；
背景：#C31F3C；
}
身体{
字体系列：“Raleway”，无衬线；
字号：18px；
字体风格：普通；
字体大小：300；
线高：1.8em；
颜色：#0C275B；
}
.菜单容器{
颜色：#0C275B；
填充：20px0；
显示器：flex；
证明内容：中心；
高度：60px；
}
.菜单{
宽度：100%；
显示器：flex；
证明内容：之间的空间；
字号：0.9em；
字号：700；
}
.日历{
左边距：自动；
}
反馈
.票{
左边距：20px；
}
.票{
右边填充：20px；
}
a、 红色按钮{
颜色：#FFF；
背景色：#C31F3C；
字体系列：“Raleway”，无衬线；
字号：700；
填充：5px10px 5px10px；
高度：2.1米；
文本对齐：居中；
边界半径：10px；
文字装饰：无；
}
.标志{
宽度：150px；
显示器：flex；
左侧填充：20px；
调整内容：灵活启动；
}

日历
反馈

谢谢！我真的很感激你对困扰我一段时间的事情的迅速回答。

// Before
.dropdown a:hover:after {
  width: 100%;
  left: 0;
  background:  #C31F3C;
}

// After 
.dropdown:hover > a::after {
  width: 100%;
  left: 0;
  background:  #C31F3C;
}