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

A guide on transferring radio button values to another program and saving them into a database with the help of PHP and jQuery

I have encountered an issue with storing radio button values in a database. Specifically, I want to assign the value of 1 for "Yes" and 0 for "No". To accomplish this, I am utilizing two scripts - a.php and b.php. The former obtains the radio button values ...

javascriptphpjqueryhtmlmysql

The index.html file is not displaying correctly on a servlet 3.0 configuration with Tomcat

I am currently working on a basic web application using Servlet 3.0 with Tomcat 7.0.25, and deploying the application as a war file named mywebapp.war. The structure of the war file is as follows: mywebapp/index.html mywebapp/META-INF/MANIFEST.MF myweba ...

javahtmltomcatservlet-3.0

Implementing a two-column infinite scrolling feature using ISCroll

I am looking to incorporate multi-column infinite scrolling using IScroll infinite scrolling. I want the content of my HTML to appear as follows: <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> ...

javascripthtmlcssinfinite-scrolliscroll

Extracting specific data from a JSON subnode within an HTML document

I have been attempting to retrieve product data (name, price, url), along with information on available sizes and colors, from a website that is formatted in JSON (https://www.bergzeit.de/marken/salewa/). However, I am struggling to locate the 'elemen ...

pythonhtmljsonscrapy

Trigger a fixed bottom bar animation upon hover

I have a bar fixed to the bottom of the browser that I want to hide by default. When a user hovers over it, I want the bar to be displayed until they move their cursor away. <!doctype html> <html> <head> <meta charset="utf-8"> &l ...

javascriptjqueryhtmlcss

The web element cannot be located, but it becomes visible when manually inspected

I'm facing an issue with accessing this menu in selenium as the web element doesn't show up in the inspector until I do it manually. <a id="cke_3275" class="cke_menubutton cke_menubutton__table cke_menubutton_off cke_menubutton_ ...

pythonhtmlcssseleniumautomation

Passing the initial value from a PHP array to Ajax using an HTML element

I am currently dealing with an HTML form that fetches values from an array list. The form is submitted using Ajax along with a PHP script. However, I am encountering an issue where clicking on different array items only submits the first value in the array ...

javascriptphphtmljqueryajax

Unable to send form data to app.js

Although a similar question has been asked before, I haven't been able to find a solution that works for me. I've been attempting to send HTML form data to my app.js file. Below is my index.handlebars file: <form method = 'post' a ...

htmlnode.jsexpresshandlebars.js

Provide a spider with unadulterated HTML rather than setting off AJAX requests

While my website is being crawled, which PHP function should I utilize to ensure that even if ajax isn't activated, my content still gets transmitted? PHP doesn't have the ability to determine if ajax is supported. Objective: Provide the crawle ...

htmlajaxweb-crawler

Place a div at the bottom of a flexbox while adding some padding around it

Here's what I'm dealing with: .flex-container { display: flex; justify-content: center; padding: 5%; position: relative; } .box1 { position: absolute; bottom: 0; width: 100%; height: 100%; } <div class="flex-container"> ...

htmlcssflexbox

Elevate column to top position in mobile display with Bootstrap

I am currently working with Bootstrap column classes and have set up four columns as follows: <div class="col-md-3"> @include('schedulizer.classes-panel') @include('schedulizer.time-span-options-panel') @include(&apos ...

htmlcsstwitter-bootstrap

Tips for passing parameters in the $http GET request to transmit information from a dropdown menu using AngularJS

In the modal window I have for creating a new object, there are three forms: 1) a simple input to create "Name"; 2) A dropdown with "Types"; 3) A dropdown with "Ids". The issue arises when trying to send the data after filling out all the forms. An error o ...

javascriptangularjshtml

Updating text color with Ajax response value

I need assistance with updating the text color of a sensor value displayed using html/ajax. Currently, the sensor value is being displayed successfully, but I want the text color to change based on the value. Here's an example: if value < 50 then f ...

javascripthtmlcssajaxtextcolor

Implementing a dynamic top navbar that transitions to the side on desktop with Bootstrap

I have been faced with the challenge of creating a responsive navigation bar that appears at the top on mobile devices and on the side on desktops. The issue arises when considering how to structure the rows and columns to achieve this. For mobile views, ...

htmlcsstwitter-bootstrapresponsive

Altering the background color of :after while :before is being hovered over

Is it possible to modify the :after section when hovering over the :before part? Take a look at this image for reference: I want to alter the small triangle shape when the large square is being hovered over. The square uses the :before pseudo-element and ...

css

Using jQuery to target adjacent elements excluding those that are separated by other text

I have been attempting to locate and combine adjacent em tags within paragraphs, but it has proven to be a more challenging task than I initially anticipated. Let's explore some examples to illustrate this issue: <p><em>Hello</em>&l ...

javascriptjqueryhtmltraversal

Two sections that are supposed to have the same height, but one seems to be slightly taller than the other

Upon closer inspection: At first glance, they may appear identical at certain zoom levels. However, a more detailed examination through zooming in and out reveals a noticeable discrepancy. Firefox's default zoom may make them seem incorrect, while Chr ...

csshtmllayoutheight

Placing additional text beside a nicely aligned box

I am struggling to figure out how to position text in the center left of a box that is located in the top right corner of my HTML template. <table class="label"> <tr> <td class="sign">F</td> ...

htmlcss

"Looking for a solution to the ESLint error related to 'no-unused-var' and Google Maps integration. How can I effectively resolve

I'm struggling with what seems to be a simple problem I tried adding /* export myMap */ or /* global myMap */ at the beginning of the script but I keep getting errors Code HTML <h1>My First Google Map</h1> <div id="googleMap" ...

javascripthtml

How can I prevent scrolling while a loader is displayed during page loading?

How can I disable scrollability on my personal website when the page is loading with the loader wrapper? I have tried using overflow: hidden; in the CSS but it didn't work. The loader is set to display for 2.5 seconds. Any suggestions on how to achiev ...

javajquerycssloader