悬停不适用于导航菜单中的嵌套元素答案

【问题标题】：Hover not working for nested element in navigation menu悬停不适用于导航菜单中的嵌套元素
【发布时间】：2018-11-26 16:41:00
【问题描述】：

我正在尝试创建带有下拉子菜单的导航菜单。当我尝试将嵌套的“显示”属性从“无”更改为“块”时，它不起作用。下面是代码。

在代码中，我在 class="nav" 下创建了主导航菜单。悬停时需要下拉菜单

导航类中的元素。

body {
  margin: 0;
  padding: 0;
}

.head {
  padding: 15px;
}

#contact span {
  font-weight: bold;
}

#contact {
  position: absolute;
  top: 30px;
  right: 10px;
  line-height: 5px;
  text-align: right;
}

.nav {
  background: #000;
  color: #fff;
  overflow: auto;
  padding: 15px 0px;
}

.nav>ul {
  list-style-type: none;
  padding: 0px 10px;
  float: right;
  margin: 0px;
}

.nav>ul>li {
  display: inline;
  padding: 15px 10px;
}

#products {
  list-style-type: none;
  width: 100px;
  height: 140px;
  position: absolute;
  top: 150px;
  right: 200px;
  background: red;
  margin: 0px;
  padding: 10px 10px;
  text-align: center;
  display: none;
}

#products li {
  padding: 9px 0px;
}

#services {
  list-style-type: none;
  width: 100px;
  height: 140px;
  position: absolute;
  top: 150px;
  right: 100px;
  background: red;
  margin: 0px;
  padding: 10px 10px;
  text-align: center;
  display: none;
}

#services li {
  padding: 9px 0px;
}

.nav>ul>li:hover {
  background: red;
}


/*Please check Code Here.*/

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

<!DOCTYPE html>
<html>

<head>
  <title>BASIC HTML PAGE</title>

</head>

<body>

  <div class="head">
    <h1>BUSINESS NAME</h1>
    <div id="contact">
      <p><span>Mobile:</span>+918050000824</p>
      <p><span>EMAIL:</span>garg.ishu@gmail.com</p>
    </div>
  </div>

  <div class="nav">
    <ul>
      <li>HOME</li>
      <li>ABOUT</li>
      <li class="productshome">PRODUCTS</li>
      <ul id="products">
        <li>PRODUCT-1</li>
        <li>PRODUCT-2</li>
        <li>PRODUCT-3</li>
        <li>PRODUCT-4</li>

      </ul>
      <li id="serviceshome">SERVICES
        <ul id="services">
          <li>SERVICE-1</li>
          <li>SERVICE-2</li>
          <li>SERVICE-3</li>
          <li>SERVICE-4</li>
        </ul>

      </li>
      <li>CONTACT</li>
    </ul>
  </div>

</body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

我会从服务和产品 css 中删除 display: none，因为 ID 具有很高的特异性并且会覆盖其他规则。虽然!important 可能会暂时解决这个问题，但我不会依赖!important，因为它可能会在以后引起更多问题。

您可以在当前悬停规则旁边使用display: block 声明非悬停规则。

<!DOCTYPE html>
<html>

<head>
  <title>BASIC HTML PAGE</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
    
    .head {
      padding: 15px;
    }
    
    #contact span {
      font-weight: bold;
    }
    
    #contact {
      position: absolute;
      top: 30px;
      right: 10px;
      line-height: 5px;
      text-align: right;
    }
    
    .nav {
      background: #000;
      color: #fff;
      overflow: auto;
      padding: 15px 0px;
    }
    
    .nav>ul {
      list-style-type: none;
      padding: 0px 10px;
      float: right;
      margin: 0px;
    }
    
    .nav>ul>li {
      display: inline;
      padding: 15px 10px;
    }
    
    #products {
      list-style-type: none;
      width: 100px;
      height: 140px;
      position: absolute;
      top: 150px;
      right: 200px;
      background: red;
      margin: 0px;
      padding: 10px 10px;
      text-align: center;
    }
    
    #products li {
      padding: 9px 0px;
    }
    
    #services {
      list-style-type: none;
      width: 100px;
      height: 140px;
      position: absolute;
      top: 150px;
      right: 100px;
      background: red;
      margin: 0px;
      padding: 10px 10px;
      text-align: center;
    }
    
    #services li {
      padding: 9px 0px;
    }
    
    .nav>ul>li:hover {
      background: red;
    }
    /*Please check Code Here.*/
    
    .nav>ul>li ul {
      display: none;
    }
    
    .nav>ul>li:hover ul {
      display: block;
    }
    
  </style>
</head>

<body>

  <div class="head">
    <h1>BUSINESS NAME</h1>
    <div id="contact">
      <p><span>Mobile:</span>+918050000824</p>
      <p><span>EMAIL:</span>garg.ishu@gmail.com</p>
    </div>
  </div>

  <div class="nav">
    <ul>
      <li>HOME</li>
      <li>ABOUT</li>
      <li class="productshome">PRODUCTS
        <ul id="products">
          <li>PRODUCT-1</li>
          <li>PRODUCT-2</li>
          <li>PRODUCT-3</li>
          <li>PRODUCT-4</li>
        </ul>
      </li>
      <li id="serviceshome">SERVICES
        <ul id="services">
          <li>SERVICE-1</li>
          <li>SERVICE-2</li>
          <li>SERVICE-3</li>
          <li>SERVICE-4</li>
        </ul>

      </li>
      <li>CONTACT</li>
    </ul>
  </div>

</body>

</html>

【讨论】：

【解决方案2】：

在此样式中使用 !important，因为您应用于 id 的样式（在 CSS 中具有最高优先级）不会被您的样式覆盖。

.nav>ul>li:hover ul {
  display: block !important;
}

也包括产品。 ul 不在 li 元素内。

body {
  margin: 0;
  padding: 0;
}

.head {
  padding: 15px;
}

#contact span {
  font-weight: bold;
}

#contact {
  position: absolute;
  top: 30px;
  right: 10px;
  line-height: 5px;
  text-align: right;
}

.nav {
  background: #000;
  color: #fff;
  overflow: auto;
  padding: 15px 0px;
}

.nav>ul {
  list-style-type: none;
  padding: 0px 10px;
  float: right;
  margin: 0px;
}

.nav>ul>li {
  display: inline;
  padding: 15px 10px;
}

#products {
  list-style-type: none;
  width: 100px;
  height: 140px;
  position: absolute;
  top: 150px;
  right: 200px;
  background: red;
  margin: 0px;
  padding: 10px 10px;
  text-align: center;
  display: none;
}

#products li {
  padding: 9px 0px;
}

#services {
  list-style-type: none;
  width: 100px;
  height: 140px;
  position: absolute;
  top: 150px;
  right: 100px;
  background: red;
  margin: 0px;
  padding: 10px 10px;
  text-align: center;
  display: none;
}

#services li {
  padding: 9px 0px;
}

.nav>ul>li:hover {
  background: red;
}


/*Please check Code Here.*/

.nav>ul>li:hover ul {
  display: block !important;
}

<!DOCTYPE html>
<html>

<head>
  <title>BASIC HTML PAGE</title>

</head>

<body>

  <div class="head">
    <h1>BUSINESS NAME</h1>
    <div id="contact">
      <p><span>Mobile:</span>+918050000824</p>
      <p><span>EMAIL:</span>garg.ishu@gmail.com</p>
    </div>
  </div>

  <div class="nav">
    <ul>
      <li>HOME</li>
      <li>ABOUT</li>
      <li class="productshome">PRODUCTS
        <ul id="products">
          <li>PRODUCT-1</li>
          <li>PRODUCT-2</li>
          <li>PRODUCT-3</li>
          <li>PRODUCT-4</li>

        </ul>
      </li>

      <li id="serviceshome">SERVICES
        <ul id="services">
          <li>SERVICE-1</li>
          <li>SERVICE-2</li>
          <li>SERVICE-3</li>
          <li>SERVICE-4</li>
        </ul>
      </li>
      <li>CONTACT</li>
    </ul>
  </div>

</body>

</html>

或

在products 和services 的情况下将您的id 更改为class，您的代码也可以在不重要的情况下运行。

body {
  margin: 0;
  padding: 0;
}

.head {
  padding: 15px;
}

#contact span {
  font-weight: bold;
}

#contact {
  position: absolute;
  top: 30px;
  right: 10px;
  line-height: 5px;
  text-align: right;
}

.nav {
  background: #000;
  color: #fff;
  overflow: auto;
  padding: 15px 0px;
}

.nav>ul {
  list-style-type: none;
  padding: 0px 10px;
  float: right;
  margin: 0px;
}

.nav>ul>li {
  display: inline;
  padding: 15px 10px;
}

.products {
  list-style-type: none;
  width: 100px;
  height: 140px;
  position: absolute;
  top: 150px;
  right: 200px;
  background: red;
  margin: 0px;
  padding: 10px 10px;
  text-align: center;
  display: none;
}

.products li {
  padding: 9px 0px;
}

.services {
  list-style-type: none;
  width: 100px;
  height: 140px;
  position: absolute;
  top: 150px;
  right: 100px;
  background: red;
  margin: 0px;
  padding: 10px 10px;
  text-align: center;
  display: none;
}

.services li {
  padding: 9px 0px;
}

.nav>ul>li:hover {
  background: red;
}


/*Please check Code Here.*/

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

<!DOCTYPE html>
<html>

<head>
  <title>BASIC HTML PAGE</title>

</head>

<body>

  <div class="head">
    <h1>BUSINESS NAME</h1>
    <div id="contact">
      <p><span>Mobile:</span>+918050000824</p>
      <p><span>EMAIL:</span>garg.ishu@gmail.com</p>
    </div>
  </div>

  <div class="nav">
    <ul>
      <li>HOME</li>
      <li>ABOUT</li>
      <li class="productshome">PRODUCTS
        <ul class="products">
          <li>PRODUCT-1</li>
          <li>PRODUCT-2</li>
          <li>PRODUCT-3</li>
          <li>PRODUCT-4</li>

        </ul>
      </li>

      <li id="serviceshome">SERVICES
        <ul class="services">
          <li>SERVICE-1</li>
          <li>SERVICE-2</li>
          <li>SERVICE-3</li>
          <li>SERVICE-4</li>
        </ul>
      </li>
      <li>CONTACT</li>
    </ul>
  </div>

</body>

</html>

【讨论】：

【解决方案3】：

带有下拉子菜单的导航菜单

  body {
      margin: 0;
      padding: 0;
    }
    
    .head {
      padding: 15px;
    }
    
    #contact span {
      font-weight: bold;
    }
    
    #contact {
      position: absolute;
      top: 30px;
      right: 10px;
      line-height: 5px;
      text-align: right;
    }
    
    .nav {
      background: #000;
      color: #fff;
      overflow: auto;
      padding: 15px 0px;
    }
    
    .nav>ul {
      list-style-type: none;
      padding: 0px 10px;
      float: right;
      margin: 0px;
    }
    
    .nav>ul>li {
      display: inline;
      padding: 15px 10px;
    }
    
    .products {
      list-style-type: none;
      width: 100px;
      height: 150px;
      position: absolute;
      top: 165px;
      right: 206px;
      background-color: #f9f9f9;
      margin: 0px;
      padding: 10px 10px;
      text-align: center;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      display: none;
    }
    
    .products li {
      color: black;
      padding: 9px 0px;
      background-color: white;
    }

.products li:hover {
    background-color: #ddd;
}
    
    .services {
      list-style-type: none;
      width: 100px;
      height: 147px;
      position: absolute;
      top: 165px;
      right: 85px;
      background-color: #f9f9f9;
      margin: 0px;
      padding: 10px 10px;
      text-align: center;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      display: none;
    }
    
    .services li {
      color: black;
      padding: 9px 0px;
      background-color: white;
    }

    .products li:hover {
      background-color: #ddd;
    }
    
    .nav>ul>li:hover {
      background: red;
    }
    /*Please check Code Here.*/
    
    .nav>ul>li:hover ul {
      display: block;
    }

【讨论】：

【解决方案4】：

这是一个特异性问题：您将display: none; 设置在具有非常高特异性的id 选择器上，但将display: block; 设置在特异性非常低的选择器上：后代选择器。 id 将覆盖该选择器，无论它们出现在级联中的哪个位置。考虑将您的 display:none 抽象为仅作为后代选择器（从 #products 中删除该属性等），它应该可以正常工作：

.nav>ul>li ul{
    display: none;
}

一些有用的阅读：

https://www.w3schools.com/css/css_combinators.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

【讨论】：

看来你是对的。由于特殊性，“显示：块”不起作用。但是当我尝试你的方式时。它没有考虑“显示：无”。请检查一下。
您是否从所有 id 选择器中删除了 display: none？
再次，您的答案是正确的。谢谢。我的代码本身有问题。
Brett 的回答还展示了声明这些 CSS 规则的正确顺序。
@Ishaan 很高兴为您提供帮助！编码愉快！