The Super Sub menu is failing to display correctly as intended

I encountered an issue while trying to create a Super sub-menu. The problem is that the super sub-menu appears when I hover over the main menus, instead of the sub-menus. I suspect there may be something wrong with the display: none; attribute, but I'm unsure how to resolve it. I attempted to add the class and double-checked the HTML for typos or errors, but I am still confused and stuck. Please assist me with this dilemma.

Here is the code snippet:

* {
    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%20TEST.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 class="subMenu">
          <li>
            <a href="#">Numbers</a>
            <ul class="SuperSubMenu">
              <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>

htmlcsscss-selectors

Answer №1

For the third-to-last CSS rule that controls the appearance of regular sub menus when hovering over the main menu items, it's important to use direct descendant operators. Otherwise, this rule will also affect the visibility of the ul elements of the SuperSubMenus when hovering over the main menu items. Update the selector as follows:

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%20TEST.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 class="subMenu">
          <li>
            <a href="#">Numbers</a>
            <ul class="SuperSubMenu">
              <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>

Answer №2

The current issue lies in the fact that

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

is conflicting with

.SuperSubMenu {
 display: none; 
}

declaration. To resolve this, you can apply !important to both CSS rules for SuperSubMenu. While not the most elegant solution, it does the job.

* {
    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%20TEST.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 class="subMenu">
          <li>
            <a href="#">Numbers</a>
            <ul class="SuperSubMenu">
              <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>

Answer №3

Here is a simple CSS solution for creating a dropdown menu: 

.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 class="dropdown">
  <button class="dropbtn">Dropdown Menu</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the nearest attribute from a radio button when using JQuery on a click event

I have a query regarding the usage of JS / JQuery to extract the data-product-name from a selected radio button, prior to any form submission. Although my attempt at code implementation seems incorrect: return jQuery({{Click Element}}).closest("form" ...

javascriptjqueryhtml

Is there a way to invoke a client-side function from the server?

Is there a way to display an alert at the top of the browser if the SQL query returns empty results? I tried using the "alert" function, but I'm struggling with customizing its appearance. I have a function in my HTML code that triggers an alert, but ...

htmltypescriptexpress

Angular Script Linking

Hello there! I am currently attempting to add an HTML tag to my response message, but for some reason it isn't working as expected. Here is a snippet of my controller code (in case the API indicates that the account doesn't exist - see this scr ...

javascripthtmlangularjs

Another approach to utilize JavaScript for populating content into a <div> container?

Upon loading the page, I aim to display a message in the <div> element. Below is the HTML and JavaScript code I have implemented: <body onload="printMsg()"> <div id="write"></div> </body> function printMsg() { var no ...

javascripthtml

The element is not visible when using a cssSelector with selenium, but it is visible when using xpath

After attempting the java code below: driver.findElement(By.cssSelector("input.only-numbers.ltr")).sendKeys("111"); An error was encountered: Exception in thread "main" org.openqa.selenium.ElementNotVisibleException: element not visible However, w ...

javaseleniumxpathselenium-webdrivercss-selectors

jQuery - delete a single word that is case-sensitive

Is there a way to eliminate a specific case-sensitive word from a fully loaded webpage? The word in question is "Posts" and it appears within a div called #pd_top_rated_holder that is generated by Javascript. The Javascript code is sourced externally, so ...

javascriptjquerycss

Tips for storing the output of a script URL in a JavaScript variable

I am currently facing an issue with running a script in the 'head' element of a webpage. The script makes an API call to a specific URL and retrieves results in the form of a JavaScript array. However, I am encountering difficulty because the API ...

javascripthtmldom

css The issue of ul and ol elements not inheriting the padding property

https://codepen.io/unique-user123/pen/abcDeFG Why is it necessary to utilize the ul, ol, and li selectors in order to remove the default 40px left padding and 16px top and bottom margin? Can't we simply use the body selector to achieve this? <hea ...

htmlcssinheritancehtml-lists

Selection menu drops down once the save is complete

I have two drop-down menus named source and campaign, displaying data from the database. In addition to these drop-downs, there are other input fields as well. My concern is that I want to save the filled data along with the selected options in the drop-do ...

phphtmlmysql

Retrieve hyperlinks from webpage

Currently, I am attempting to extract all Netflix movie/show links from this source , along with their respective country names. For example, I aim to retrieve information such as , USA, etc. Despite my efforts so far, the current code retrieves all links ...

pythonhtml

Maintaining my navigation menu as you scroll through the page

I've been working on creating a website for my business but I'm facing a challenge. My goal is to have a fixed navigation bar that stays in place as people scroll down the page, similar to what you can see on this website: (where the navigat ...

javascriptjquerycss

Managing and keeping track of a universal value within the success callback function among numerous Ajax POST requests

I am faced with a challenge involving two HTML elements: 1). a div element that functions as a multiple select, created automatically by a predefined widget, and 2). a button that triggers an onclick event. On the JavaScript side, I have a global variable ...

javascripthtmljqueryajax

Is there a way to efficiently integrate text from a webpage into a "Twitter Share" button automatically?

I have a cool feature on my website - a random quote generator where users can tweet the current quote at the click of a button. I've set up a Twitter share link using jQuery that dynamically updates with each new quote: $('.twitter-share-button ...

jqueryhtmltwitterhyperlink

Is it possible to display images in PHP when the value matches the specified string?

Is there a faster and more efficient way to display one or multiple images if $value == $string? For instance, let's say I have a cell containing the string 'r o g'. If a user inputs ro, it should output <img src="red.gif"> and <im ...

phphtmlimageif-statement

What is the best way to display a webpage within an iOS app using PhoneGap?

In my iOS phonegap app, I am looking to have a single view that displays a web page. Can someone guide me on how to load this specific view with a particular URL using JavaScript? Although I primarily develop native iOS applications and do not have expert ...

javascripthtmliosurlcordova

Error in Angular 2: The app.component.html file triggered an exception at line 1, character 108 due to excessive recursion

After successfully setting up the Angular 2 quickstart and connecting to an express server, I encountered a problem when switching from using the template property to component templateUrl. I have created a Plunker to showcase this issue: Plunker Demo imp ...

javascriptangularjshtmlrecursion

Should I use several if get statements on one page, or spread them out across multiple pages in PHP structure?

After working with PHP for a few years, one of my ongoing dilemmas is how to best structure my pages. Should I follow the current approach: if(getValue('action') == "jobsFilter" && getValue('jobType') == "open") ...

phphtmloop

Clicking on components that are stacked on top of each

I am facing an issue with two React arrow function components stacked on top of each other using absolute positioning. Both components have onClick attributes, but I want only the one on top to be clickable. Is there a workaround for this? Here is a simpl ...

cssreactjsreact-nativematerial-ui

What is the best approach to updating multiple rows instead of just the first row using the update button located on both sides using PHP and AJAX?

Starting fresh, so I might sound like a beginner with this question. How can I make use of the update button to update specific rows instead of just the top row? Every time I try to update, it only works for the top row. Here's the code snippet from ...

javascriptphphtmlajaxmysqli

Tips for validating user input in AngularJS without using a form tag

Within a popup, I am displaying HTML content that has been copied from another div and shown in the popup. I need to validate this input field to ensure it is required, and display an error message below the input box. <!-- HTML code for changing zip c ...

javascriptjqueryhtmlcssangularjs