当我也将元素悬停在里面时，我想添加一个边框底部[重复]

Question

我有一个导航栏，当我将鼠标悬停在 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 个导航列表上，并且 :hover 将被激活。但是，一旦我将鼠标悬停在内部 li 上， :hover 就停止了，我尝试使用 .level2-ul 但无法这样做。谢谢你的帮助。

Answer 1

将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>