I have a navigation bar that is outputs a border-bottom when i hover over the li but when i hover over the child elements of that li, the :hover stops, how do i make it so that the :hover remains even when i hover over the child elements.
I would like to add some parts of the code. This is the HTML file.
* {
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>
By doing this, I can hover over the 3 nav lis and :hover would be activated. However, as soon as I hover over the inner li, the :hover stopped, I tried using .level2-ul but unable to do so. Thank you for the help.