Question

链接到我的code

我使用div和p测试了我的css，当我将鼠标悬停在div上时，p下拉一些段落，我可以移动p而不会使用下拉列表消失，这是我的测试code。

我尝试使用.nav-item:hover .nav-content { max-height:400px; }进行测试，但只有当我使用+选择器时它才能正常工作。

Answer 1

您应该使用:hover元素上的a，而不是使用:hover元素上的li：

li:hover .nav-item {
  background-color:red;
  color:white;
  text-decoration:none;
  transition: 0.2s;
}

li:hover .nav-item ~ .nav-content {
  max-height:400px;
}

以下是示例：

/*Navigation Bar */
/*Css*/

body, html {
  margin:0px;
  padding:0px;
}

.nav-main {
  background-color:black;
  width:100%;
  position:fixed;
  height:60px;
  color:white;
}

.nav-main .logo {
  float:left;
  height:30px;
  padding:18px 20px;
  font-size: 18px;
  line-height: 30px;
}

.nav-main > ul {
  margin:0px;
  padding:0px;
  float:left;
  list-style-type: none;
}

.nav-main > ul > li  {
  float:left;
}

.nav-item {
  display:inline-block;
  padding:20px 20px;
  height:60px;
  line-height: 26px;
  color:white;
  text-decoration: none;
}

a:visited, a:link {
  text-decoration: none;
}

.nav-content {
  position:absolute;
  top:60px;
  overflow:hidden;
  background-color:red;
  max-height: 0px;
}

.nav-content a {
  color:black;
  color:white;
  text-decoration: none;
}

.nav-sub {
  padding:10px;
}

.nav-sub ul {
  padding:0px;
  margin:0px;
  list-style-type: none;
}

.nav-sub ul li a {
  display: inline-block;
  padding:5px 0;
}

li:hover .nav-item {
  background-color:red;
  color:white;
  text-decoration:none;
  transition: 0.2s;
}

.nav-item:focus {
  background-color:white;
  color:red;
  transition: 0.2s
}

li:hover .nav-item ~ .nav-content {
  max-height:400px;
}

<title>Football Match</title>
<!-- below are bootstrap cdn link, jquery and js -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>

  <!-- Navigation bar -->
  <div class="nav-main">
    <div class="logo">WebsiteLogo</div>
    <ul>
      <li>
        <a class="nav-item" href="#">Home</a>
      </li>
      <li>
        <a class="nav-item" href="#">Matching</a>
        <div class="nav-content">
          <div class="nav-sub">
            <ul>
              <li><a href="#">Match Query</a></li>
              <li><a href="#">Match Creation</a></li>
              <li><a href="#">Match Manager</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li>
        <a class="nav-item" href="#">About</a>
      </li>
    </ul>
  </div>

</body>

导航下拉菜单悬停工具提示无法按预期工作

1 个答案: