带有水平子菜单的水平导航-消失的下划线 [英] Horizontal nav with horizontal submenu - vanishing underline

查看：39
本文介绍了带有水平子菜单的水平导航-消失的下划线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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>

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆