CODEWITHSUNDEEP
htmlcss
Ishaan
Ishaan

Reputation: 73

Hover not working for nested element in navigation menu

I am trying to create a Navigation Menu with dropdown sub-menus. When I am trying to change "display" property from "None"to "Block" for Nested it is not working. Here below is code.

In the Code I have created Main Navigation Menu under with class="nav". and dropdown required on hover over

  • elements in nav 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>[email protected]</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>

    Upvotes: 4

    Views: 1197

    • Answers (4)

    Brett Commandeur
    Brett Commandeur

    Reputation: 590

    I would remove the display: none from the services and products css because IDs have high specificity and will override other rules. While !important might temporarily solve this issue, I would not rely on !important as it could cause more issues later on.

    You can declare a non-hovered rule with display: block alongside your current hovered rule. 

    <!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>[email protected]</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>

    Upvotes: 0

    Nandita Sharma
    Nandita Sharma

    Reputation: 13417

    Use !important in this style because your styles applied on id(which has highest priority in CSS) are not getting overridden by your style.

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

    Also incase of products. the ul was not inside the li element.

    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>[email protected]</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>

    OR

    Change your id to class in case of products and services and your code will work without important as well.

    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>[email protected]</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>

    Upvotes: 1

    Amhil
    Amhil

    Reputation: 35

    Navigation Menu with dropdown sub-menus

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

    Upvotes: 0

    Ben Steward
    Ben Steward

    Reputation: 2417

    This is an issue of specificity: you set the display: none; on an id selector, which has very high specificity, but set display: block; on a very low specificity selector: the descendant selector. The id will override that selector no matter where they show up in the cascade. Consider abstracting your display:none to only be a descendant selector (removing that property from #products, etc.), and it should work fine:

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

    Some helpful reading:

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

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

    Upvotes: 0

    Related Questions