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

前端问题 得得之家
Horizontal nav with horizontal submenu - vanishing underline(带有水平子菜单的水平导航-消失的下划线)
本文介绍了带有水平子菜单的水平导航-消失的下划线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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;
  }

我创建了codepen here.

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

推荐答案

您应该将:hover放在li.dropdown元素上。因此将.dropdown a:hover:after替换为.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;
}
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"> 
  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'>
                  
                 <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 -->

      <!-- Begin main section -->
<div class='main-container'>

  </div>

这篇关于带有水平子菜单的水平导航-消失的下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

如何删除此错误&quot；响应必须在&quot；处包含数组。创建下拉菜单时(&Q；)
how to remove this error quot;Response must contain an array at quot; . quot;.quot; while making dropdown(如何删除此错误quot；响应必须在quot；处包含数组。创建下拉菜单时(Q；))
为什么在通过JS为一个HTML文档添加`svg`标签时，需要使用`Document.createElementNS`？
Why is it necessary to use `document.createElementNS` when adding `svg` tags to an HTML document via JS?(为什么在通过JS为一个HTML文档添加`svg`标签时，需要使用`Document.createElementNS`？)
Wkhtmltopdf print-media-type仅使用@media print，而忽略其余内容
wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest(Wkhtmltopdf print-media-type仅使用@media print，而忽略其余内容)
价格取决于无线电输入的选择
price depend on selection of radio input(价格取决于无线电输入的选择)
根据没有按钮的选择计算价格
calculate price depend on selection without button(根据没有按钮的选择计算价格)
在缩小HTML之前，我应该考虑什么？
What should I consider before minifying HTML?(在缩小HTML之前，我应该考虑什么？)
前端问题php问题Java问题Python问题C/C++问题C#/.NET问题移动开发问题数据库问题
html vue validate adobe dreamweaver hbuilder vscode aptana editor dedecms ckeditor 编辑器 过滤 规则 织梦 图片本地化 模板 缩略图 图集 图片删除 ajax 瀑布流 无限下拉 cms 判断 sql 清除 tag 文档数 angularjs2 按钮 切换效果 vue3 thinkphp yii2 css 项目列表 li go Beego Buffalo Echo Gin Iris Revel 百度云 虚拟主机 pbootcms 伪静态 框架 排序 数据库 对象 字段 sql语句 php 字符串 分割 D3.js bootstrap 函数 svg selectAll 织梦cms 关键词 解析 采集 长度限制 日期 正则表达式