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