Question

当我将鼠标悬停在其项目上时，您能帮我解决下拉菜单消失的问题吗？我正在尽最大努力寻找解决方案，但我没有运气。我的 css 中肯定少了一些东西。

这是我的代码

      .navbar .nav-item:hover .nav-link{ color: #fff;  }
      .navbar .nav-item:hover .dropdown-menu{ 
        display: block;
      }
      .navbar .nav-item .dropdown-menu{ margin-top:0; }
    
    .dropdown-menu {
      margin-top: 0;
    }
    
    .navbar .nav-item:not(:last-child) {
      margin-right: 35px;
    }
    
    .dropdown-toggle::after {
      transition: transform 0.15s linear;
    }
    
    .show.dropdown .dropdown-toggle::after {
      transform: translateY(3px);
    }

    <section class="w3l-bootstrap-header">
      <nav class="navbar navbar-expand-lg navbar-light py-lg-2 py-2">
        <div class="container">
          <a class="navbar-brand" href="index.html">
           
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon fa fa-bars"></span>
          </button>
    
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mx-auto">
              <li class="nav-item">
                <a class="nav-link" href="index.html">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="about.html">About</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Projects</a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
                  <a class="dropdown-item" href="#">Completed</a>
                  <a class="dropdown-item" href="#">On Going</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="services.html">Services</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="contact.html">Contact</a>
              </li>
            </ul>
            
          </div>
        </div>
      </nav>
    </section>

希望你能帮助我。非常感谢！

上帝保佑！

Answer 1

由于您的背景是暗的，您需要在 nav ul ul 选择器中为文本添加浅色。我已经更新了你的 CSS。

.navbar {
  display: flex;
  height: 7vh;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  border-bottom: 1px solid #52657a;
  width: 100%;
}

.navbar-nav {
  list-style: none;
  display: flex;
  align-items: center;
  padding-top: 2vh;
  padding-bottom: 2vh;
}

.nav-item {
  padding-left: 1vw;
  text-decoration: none;
  position: relative;
}

.nav-link {
  text-decoration: none;
  color: red;
}


nav ul ul {
  position: absolute;
  list-style: none;
  top: 100%;
  padding: 0;
  text-align: left;
  display: none;
  background: #0A141C;
  color: #fff;
}

nav ul ul li {
  padding-bottom: 10px;
  padding-top: 5px
}

nav ul li:hover > ul {
  display: block;
}

.nav-link:hover {
  text-decoration: none;
  color: #536778;
}

.router-link {
  text-decoration: none;
}

.router-link-exact-active {
  color: rgb(26, 219, 219);
}

li a {
  text-decoration: none;
  color: black;
}


#logo {
  max-width: 3.5vh;
  max-height: 3.5vh;
}

这个 CSS 就在你的手中。对于上述 CSS，您已在此选择器 color:#fff; 中悬停时将 .navbar .nav-item:hover .nav-link 添加到导航链接。这就是为什么文本在悬停时消失的原因。 试试这个

    .navbar .nav-item:hover .nav-link{  color: #000; }
    .navbar .nav-item:hover .dropdown-menu{ 
      display: block;
    }
    .navbar .nav-item .dropdown-menu{ margin-top:0; }
    
    .dropdown-menu {
      margin-top: 0;
      display: block;
    }
    
    .navbar .nav-item:not(:last-child) {
      margin-right: 35px;
    }
    
    .dropdown-toggle::after {
      transition: transform 0.15s linear;
    }
    
    .show.dropdown .dropdown-toggle::after {
      transform: translateY(3px);
    }

悬停到下拉项时下拉菜单消失

1 个答案: