Home > Blockchain >  Super Sub menu Not appearing like supposed to
Super Sub menu Not appearing like supposed to

Time：12-14

So I was trying to make a Super sub-menu and for some reason, the super sub-menu appears when I hover above the main menus, not the sub-menus. and I thought something is wrong with the display: none; but I don't know how to fix it. I already tried to put it with the class it still didn't work and I already double-check the HTML to ensure not typo and none so I'm so confused and stuck right now, PLEASE HELP.

The code :

* {
    margin: 0;
    padding: 0;
  }
  
body {
  background-image: url(photo-1542831371-29b0f74f9713.jpg);
  background-size: cover;
}
  
nav {
  /* this is a tag */
  height: 60px;
  background-color: white;
  display:flex;
}
  
nav a {
  font-family: arial, sans-serif;
  color: #222;
  font-size: 18px;
  line-height: 55px;
  padding: 2.3px 14px;
  text-decoration: none;
  text-align: center;
  display: block;  
}

nav form {
  max-width: 100%;
  height: 60px;
}
  
nav ul {
  display:flex;
  list-style: none;
    
}
  
nav li:hover>a {
  background: rgb(224, 224, 224);
  cursor: pointer;
}
  
nav ul li ul {
  display: none;
  position: absolute;
  background-color: rgba(255, 238, 238, 0.89);
  backdrop-filter: blur(5px);
  border-radius: 0px 0px 4px 4px;
}
  
nav ul li:hover ul {
  display: block;
}
  
nav ul li ul li ul {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  -ms-transform: translate(100%,0);
  -webkit-transform: translate(100%,0);
  transform:translate(100%,0);
  list-style: none;
}



.subMenu li:hover>.SuperSubMenu{
  display: block;
}
<!DOCTYPE html>
<html>
<head>
  <title>Wall of nothing</title>
  <link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
  <nav id="navbar">
    <form name="" method="" action="BUTTON TEST.html">
      <input type="image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
    </form>
    <ul>
      <li>
        <a href="about.php">About</a>
        <ul>
          <li>
            <a href="about.php#expectations">Expectations</a>
          </li>
          <li>
            <a href="about.php#faq">FAQ</a>
          </li>
          <li>
            <a href="laptopprogram.php">Laptop Program</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="why.php">Why?</a>
        <ul>
          <li>
            <a href="#">What?</a>
          </li>
          <li>
            <a href="#">Events & Activities</a>
          </li>
          <li>
            <a href="#">Meet The Grads</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Events</a>
        <ul>
          <li>
            <a href="#">Opportunities</a>
          </li>
          <li>
            <a href="#">asd</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="" target="_blank">assd</a>
      </li>
      <li>
        <a href="contact.php">Contact</a>
        <ul >
          <li>
            <a href="#">Numbers</a>
            <ul >
              <li>
                <a href="#">Person1</a>
              </li>
              <li>
                <a href="#">Person2</a>
              </li>
            </ul>
          </li>
          
          <li>
            <a href="#">Fax</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

CodePudding user response：

It's not working because

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

is overwriting

.SuperSubMenu {
 display: none; 
}

property. To fix it you can add !important to both css for SuperSubMenu. This isn't probably the best way, but it works.

* {
    margin: 0;
    padding: 0;
  }
  
body {
  background-image: url(photo-1542831371-29b0f74f9713.jpg);
  background-size: cover;
}
  
nav {
  /* this is a tag */
  height: 60px;
  background-color: white;
  display:flex;
}
  
nav a {
  font-family: arial, sans-serif;
  color: #222;
  font-size: 18px;
  line-height: 55px;
  padding: 2.3px 14px;
  text-decoration: none;
  text-align: center;
  display: block;  
}

nav form {
  max-width: 100%;
  height: 60px;
}
  
nav ul {
  display:flex;
  list-style: none;
    
}
  
nav li:hover>a {
  background: rgb(224, 224, 224);
  cursor: pointer;
}
  
nav ul li ul {
  display: none;
  position: absolute;
  background-color: rgba(255, 238, 238, 0.89);
  backdrop-filter: blur(5px);
  border-radius: 0px 0px 4px 4px;
}

.SuperSubMenu {
  display: none !important;
}
  
nav ul li:hover ul {
  display: block;
}
  
nav ul li ul li ul {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  -ms-transform: translate(100%,0);
  -webkit-transform: translate(100%,0);
  transform:translate(100%,0);
  list-style: none;
}

.subMenu li:hover>.SuperSubMenu{
  display: block !important;
}
<!DOCTYPE html>
<html>
<head>
  <title>Wall of nothing</title>
  <link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
  <nav id="navbar">
    <form name="" method="" action="BUTTON TEST.html">
      <input type="image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
    </form>
    <ul>
      <li>
        <a href="about.php">About</a>
        <ul>
          <li>
            <a href="about.php#expectations">Expectations</a>
          </li>
          <li>
            <a href="about.php#faq">FAQ</a>
          </li>
          <li>
            <a href="laptopprogram.php">Laptop Program</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="why.php">Why?</a>
        <ul>
          <li>
            <a href="#">What?</a>
          </li>
          <li>
            <a href="#">Events & Activities</a>
          </li>
          <li>
            <a href="#">Meet The Grads</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Events</a>
        <ul>
          <li>
            <a href="#">Opportunities</a>
          </li>
          <li>
            <a href="#">asd</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="" target="_blank">assd</a>
      </li>
      <li>
        <a href="contact.php">Contact</a>
        <ul >
          <li>
            <a href="#">Numbers</a>
            <ul >
              <li>
                <a href="#">Person1</a>
              </li>
              <li>
                <a href="#">Person2</a>
              </li>
            </ul>
          </li>
          
          <li>
            <a href="#">Fax</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

CodePudding user response：

You need to use direct descendant operators in your third-to-last CSS rule - the one which makes regular sub menus appear when hovering the main menu items. Otherwise this rule will also affect (i.e. make visible) the ul of the SuperSubMenus on hover of the main menu items. So change this selector:

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

...to the following:

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


* {
    margin: 0;
    padding: 0;
  }
  
body {
  background-image: url(photo-1542831371-29b0f74f9713.jpg);
  background-size: cover;
}
  
nav {
  /* this is a tag */
  height: 60px;
  background-color: white;
  display:flex;
}
  
nav a {
  font-family: arial, sans-serif;
  color: #222;
  font-size: 18px;
  line-height: 55px;
  padding: 2.3px 14px;
  text-decoration: none;
  text-align: center;
  display: block;  
}

nav form {
  max-width: 100%;
  height: 60px;
}
  
nav ul {
  display:flex;
  list-style: none;
    
}
  
nav li:hover>a {
  background: rgb(224, 224, 224);
  cursor: pointer;
}
  
nav ul li ul {
  display: none;
  position: absolute;
  background-color: rgba(255, 238, 238, 0.89);
  backdrop-filter: blur(5px);
  border-radius: 0px 0px 4px 4px;
}
  
nav > ul > li:hover > ul {
  display: block;
}
  
nav ul li ul li ul {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  -ms-transform: translate(100%,0);
  -webkit-transform: translate(100%,0);
  transform:translate(100%,0);
  list-style: none;
}


.subMenu li:hover>.SuperSubMenu{
  display: block;
}
<!DOCTYPE html>
<html>
<head>
  <title>Wall of nothing</title>
  <link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
  <nav id="navbar">
    <form name="" method="" action="BUTTON TEST.html">
      <input type="image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
    </form>
    <ul>
      <li>
        <a href="about.php">About</a>
        <ul>
          <li>
            <a href="about.php#expectations">Expectations</a>
          </li>
          <li>
            <a href="about.php#faq">FAQ</a>
          </li>
          <li>
            <a href="laptopprogram.php">Laptop Program</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="why.php">Why?</a>
        <ul>
          <li>
            <a href="#">What?</a>
          </li>
          <li>
            <a href="#">Events & Activities</a>
          </li>
          <li>
            <a href="#">Meet The Grads</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Events</a>
        <ul>
          <li>
            <a href="#">Opportunities</a>
          </li>
          <li>
            <a href="#">asd</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="" target="_blank">assd</a>
      </li>
      <li>
        <a href="contact.php">Contact</a>
        <ul >
          <li>
            <a href="#">Numbers</a>
            <ul >
              <li>
                <a href="#">Person1</a>
              </li>
              <li>
                <a href="#">Person2</a>
              </li>
            </ul>
          </li>
          
          <li>
            <a href="#">Fax</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

CodePudding user response：

you can do with simple CSS 

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
<div >
  <button >Dropdown Menu</button>
  <div >
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Page link：https//www.codepudding.com/Blockchain/226488.html

Prev:How can I add spacing between these progress bar titles?
Next:applying css to adjacent element
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding