悬停不适用于嵌套元素

时间：2018-06-17 18:05:19

标签： html css

我正在尝试使用下拉子菜单创建导航菜单。当我试图改变＆＃34;显示＆＃34;属于＆＃34;无＆＃34;到＆＃34; Block＆＃34;对于嵌套它不起作用。以下是代码。

在Code中，我创建了主导航菜单，其中包含class =＆＃34; nav＆＃34;。将鼠标悬停在导航类中的

  • 元素上时需要和下拉列表。

    ＆＃13;
    ＆＃13; 
    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;
}
    ＆＃13; 
    <!DOCTYPE html>
<html>

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

</head>

<body>

  <div class="head">
    <h1>BUSSINESS 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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    • 4 个答案:

    答案 0 :(得分：1)

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

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

    此外还有产品。 ul不在li元素内。

    ＆＃13;
    ＆＃13; 
    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;
}
    ＆＃13; 
    <!DOCTYPE html>
<html>

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

</head>

<body>

  <div class="head">
    <h1>BUSSINESS 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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    或

    如果products和services，则将您的ID更改为班级，您的代码也可以正常运行。

    ＆＃13;
    ＆＃13; 
    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;
}
    ＆＃13; 
    <!DOCTYPE html>
<html>

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

</head>

<body>

  <div class="head">
    <h1>BUSSINESS 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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    答案 1 :(得分：0)

    这是一个特异性问题：你在一个id选择器上设置display: none;，它具有非常高的特异性，但在非常低的特异性选择器上设置display: block;：后代选择器。无论它们在级联中出现的位置，id都将覆盖该选择器。考虑抽象你的显示：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

    答案 2 :(得分：0)

    我会从服务和产品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>BUSSINESS 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>

    答案 3 :(得分：0)

    带下拉子菜单的导航菜单

      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;
    }

    相关问题
    最新问题