我有一个导航栏,当我将鼠标悬停在li上时,它会输出一个边框底,但是当我将鼠标悬停在那个li的子元素上时,:hover停止,我如何做到这一点,以便:hover保持均匀当我将鼠标悬停在子元素上时。
我想添加部分代码。这是HTML文件。
* {
margin: 0;
padding: 0;
border: 0;
}
` header {
background: #fff;
width: 100%;
}
.navbar {
padding: 0;
}
.navbar nav {
width: 100%;
height: 115px;
}
.navbar nav ul {
float: right;
margin: 0;
}
.navbar nav ul li {
text-decoration: none;
float: left;
list-style: none;
position: relative;
}
.navbar nav ul li a {
color: black;
display: block;
padding: 45.5px 14px;
text-decoration: none;
}
.parent-a:hover {
border-bottom: #aa312c 4px solid;
padding: 25.5px 14px;
margin: 18px 0;
}
.level2-ul:hover .parent-a {
border-bottom: #aa312c 4px solid;
padding: 25.5px 14px;
margin: 18px 0;
}
.navbar nav ul li ul {
display: none;
position: absolute;
background-color: white;
padding: 0;
border-radius: 0px 0px 4px 4px;
}
.navbar nav ul li:hover ul {
display: block;
background-color: rgb(234, 236, 237);
z-index: 100;
}
.navbar nav ul li ul li {
width: 180px;
border-radius: 4px;
}
.navbar nav ul li ul li a {
color: black;
padding: 8px 14px;
border-bottom: 1px solid #dedfe1;
}
.navbar nav ul li ul li a:hover {
background: #dedfe1;
}
#headline {
color: #fff;
padding: 4px;
font-size: 1.5rem;
margin: 0;
text-align: center;
font-weight: bold;
}
#headline-wrapper {
background: #aa312c;
}
<header>
<div id="header-wrapper">
<div class="body" id="logo-wrapper">
<!-- Navigation start -->
<div class="navbar">
<nav>
<ul>
<li>
<a class="parent-a" href="#">Online Activities</a>
<ul>
<li class="level2-ul"><a href="http://www.google.com">Google</a></li>
<li class="level2-ul"><a href="http://www.youtube.com">Youtube</a></li>
<li class="level2-ul"><a href="http://www.reddit.com">Reddit</a></li>
</ul>
</li>
<li>
<a class="parent-a" href="#">Social Media</a>
<ul>
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="http://www.instagram.com">Instagram</a></li>
<li><a href="http://www.twitter.com">Twitter</a></li>
</ul>
</li>
<li>
<a class="parent-a" href="#">Online Shopping</a>
<ul>
<li><a href="http://www.shopee.sg">Shopee</a></li>
<li><a href="http://www.lazada.sg">Lazada</a></li>
<li><a href="http://www.carousell.com">Carousell</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div id="headline-wrapper">
<h2 id="headline" class="text-center text-uppercase">
Software Quotation Tool
</h2>
</div>
</div>
</header>
这样做,我可以将鼠标悬停在3个导航lis上,然后:hover会被激活。但是,当我将鼠标悬停在内部li上时,:hover停止了,我尝试使用.level2-ul,但无法这样做。谢谢您的帮助。
答案 0 :(得分:0)
将parent-a
放在li
而不是a
上。
* {
margin: 0;
padding: 0;
border: 0;
}
` header {
background: #fff;
width: 100%;
}
.navbar {
padding: 0;
}
.navbar nav {
width: 100%;
height: 115px;
}
.navbar nav ul {
float: right;
margin: 0;
}
.navbar nav ul li {
text-decoration: none;
float: left;
list-style: none;
position: relative;
}
.navbar nav ul li a {
color: black;
display: block;
padding: 45.5px 14px;
text-decoration: none;
}
.parent-a:hover > a {
border-bottom: #aa312c 4px solid;
padding: 25.5px 14px;
margin: 18px 0;
}
.level2-ul:hover .parent-a {
border-bottom: #aa312c 4px solid;
padding: 25.5px 14px;
margin: 18px 0;
}
.navbar nav ul li ul {
display: none;
position: absolute;
background-color: white;
padding: 0;
border-radius: 0px 0px 4px 4px;
}
.navbar nav ul li:hover ul {
display: block;
background-color: rgb(234, 236, 237);
z-index: 100;
}
.navbar nav ul li ul li {
width: 180px;
border-radius: 4px;
}
.navbar nav ul li ul li a {
color: black;
padding: 8px 14px;
border-bottom: 1px solid #dedfe1;
}
.navbar nav ul li ul li a:hover {
background: #dedfe1;
}
#headline {
color: #fff;
padding: 4px;
font-size: 1.5rem;
margin: 0;
text-align: center;
font-weight: bold;
}
#headline-wrapper {
background: #aa312c;
}
<header>
<div id="header-wrapper">
<div class="body" id="logo-wrapper">
<!-- Navigation start -->
<div class="navbar">
<nav>
<ul>
<li class="parent-a" >
<a href="#">Online Activities</a>
<ul>
<li class="level2-ul"><a href="http://www.google.com">Google</a></li>
<li class="level2-ul"><a href="http://www.youtube.com">Youtube</a></li>
<li class="level2-ul"><a href="http://www.reddit.com">Reddit</a></li>
</ul>
</li>
<li class="parent-a">
<a href="#">Social Media</a>
<ul>
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="http://www.instagram.com">Instagram</a></li>
<li><a href="http://www.twitter.com">Twitter</a></li>
</ul>
</li>
<li class="parent-a">
<a href="#">Online Shopping</a>
<ul>
<li><a href="http://www.shopee.sg">Shopee</a></li>
<li><a href="http://www.lazada.sg">Lazada</a></li>
<li><a href="http://www.carousell.com">Carousell</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>