-1

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.

connexo
  • 41,035
  • 12
  • 60
  • 87
Min UD
  • 99
  • 1
  • 10

1 Answers1

0

Put parent-a on the li rather than on the 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>
connexo
  • 41,035
  • 12
  • 60
  • 87