Question

我想删除从“活动”下拉按钮继承的下拉内容中的边界线。当前，当页面处于“活动”状态时（即当前页面），底线既是下拉按钮，也是下拉内容。我希望只有在下拉菜单内容悬停时才显示底线。当页面处于非活动状态时，它会起作用，因为活动属性不会转移到下拉菜单内容。

.tm-nav-link {
  /* color: white; */
  font-size: 1.4rem;
}

#tm-main-nav .nav-item .nav-link {
  border-bottom: 1px solid transparent;
}

#tm-main-nav .nav-item.active .nav-link,
#tm-main-nav .nav-item:hover .nav-link:hover {
  border-bottom: 1px solid red;
  color: red;
}


.menulink {
  display: table;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
  transition: all 3s;
  max-height: 0;
}

.dropdown:hover .dropdown-content {
  display: inline-block
}

<div class="dropdown">
  <li class="nav-item active">
    <a class="nav-link tm-nav-link" href="#">Home<span class="sr-only">(current)</span></a>
    <div class="dropdown-content">
      <a class="menulink nav-link tm-nav-link" href="#"><span>History</span></a>
      <a class="menulink nav-link tm-nav-link" href="#"><span>Geography/span></a>
    </div>
  </li>
</div>

Answer 1

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.tm-nav-link {
  /* color: white; */
  font-size: 1.4rem;
  text-decoration: none;
}
.nav-link {
text-decoration: underline;
}
#tm-main-nav .nav-item .nav-link {

  text-decoration: none;
}

.nav-link:hover {
text-decoration: underline;
}

#tm-main-nav .nav-item.active .nav-link,
#tm-main-nav .nav-item:hover .nav-link:hover {
  border-bottom: 0px solid red;
  color: red;
}

.menulink {
  display: table;
  text-decoration: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
  transition: all 3s;
  max-height: 0;
}

.dropdown:hover .dropdown-content {
  display: inline-block;
  border-bottom: 0px solid;
}

.dropdown-content:hover span {
border-bottom: 0px solid !important;
}

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

<div class="dropdown">
  <li class="nav-item active">
    <a class="nav-link tm-nav-link" href="#">Home<span class="sr-only">(current)</span></a>
    <div class="dropdown-content">
      <a class="menulink nav-link tm-nav-link" href="#"><span>History</span></a>
      <a class="menulink nav-link tm-nav-link" href="#"><span>Geography</span></a>
    </div>
  </li>
</div>

</body>
</html>

尝试在代码中进行以下修改。

 .tm-nav-link {
  /* color: white; */
  font-size: 1.4rem;
  text-decoration: none;
}
.nav-link {
  text-decoration: underline;
}

如何在下拉菜单中的悬停边框上删除边框？

1 个答案: