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

本教程将介绍带有水平子菜单的水平导航-消失的下划线的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

带有水平子菜单的水平导航-消失的下划线 教程 第1张

问题描述

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

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>

好了关于带有水平子菜单的水平导航-消失的下划线的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。