The CSS child selector seems to be malfunctioning as it is affecting all descendants of the specified type

Struggling with creating a menu containing nested lists. Attempted using a child selector (#menu-novo li:hover > ul) to display only immediate descendants, but all are still showing. Any suggestions or solutions for this issue?

#menu-novo-container {
  font-family: tahoma, Arial, helvetica, Serif;   
  border: 1px solid red;
}

#menu-novo {
 border: 3px solid green;
}

.menu-novo-item {
  border: 3px solid white;
  cursor: pointer;
}

.menu-novo-link {
  border: 3px solid yellow;
}

.menu-novo-submenu {
  border: 3px solid red;
  display: none;
}

#menu-novo li:hover > ul {
  display: block;
}

.menu-novo-link {
  display: block;
}
<div id="menu-novo-container">
    <ul id="menu-novo">
        <li class="menu-novo-item"> 1
            <ul class="menu-novo-submenu">
            <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.1</a></li>
            <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.2</a></li>
            <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.3</a></li>
            <li class="menu-novo-item">1.4
                <ul class="menu-novo-sumbenu">
                    <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.1</a></li>
                    <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.2</a></li>
                    <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.3</a></li>
                </ul>
            </li>               
            </ul>
        </li>
    </ul>
</div>

Expecting some downvotes since this question may have been asked before, but existing answers aren't solving my problem. Any assistance would be greatly appreciated :)

htmlcssdrop-down-menu

Answer №1

Ensure that different classes are added for nested li and ul elements, rather than using the same classes.

ul {
  list-style: none;
  padding-left:0;
}
#menu-novo-container {
  font-family: tahoma, Arial, helvetica, Serif;   
  border: 1px solid red;
}
#menu-novo {
  border: 3px solid green;
}
.menu-novo-item {
  border: 3px solid white;
  cursor: pointer;
}
.menu-novo-link {
  border: 3px solid yellow;
}
.menu-novo-submenu {
  border: 3px solid red;  
}
.menu-novo-submenu.child1,
#menu-novo > li:hover > ul.child1 li .child2 {
  display:none;
}
#menu-novo > li:hover > ul.child1,
#menu-novo > li:hover > ul.child1 li:hover .child2 {
  display: block;
}
.menu-novo-link {
  display: block;
}
<div id="menu-novo-container">
  <ul id="menu-novo">
    <li class="menu-novo-item"> 1
      <ul class="menu-novo-submenu child1">
        <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.1</a></li>
        <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.2</a></li>
        <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.3</a></li>
        <li class="menu-novo-item">1.4
          <ul class="menu-novo-sumbenu child2">
            <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.1</a></li>
            <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.2</a></li>
            <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.3</a></li>
          </ul>
        </li>               
      </ul>
    </li>
  </ul>
</div>

Answer №2

If I understand correctly, you should start by hiding the second level ul with display: none and then show it with display: block when hovering over the second level li.

#menu-novo li ul li ul {
   display: none;
}

#menu-novo li ul li:hover ul{
   display: block;
}


#menu-novo-container {
  font-family: tahoma, Arial, helvetica, Serif;   
  border: 1px solid red;
}

#menu-novo {
  border: 3px solid green;
}

.menu-novo-item {
  border: 3px solid white;
  cursor: pointer;
}

.menu-novo-link {
  border: 3px solid yellow;
}

.menu-novo-submenu {
  border: 3px solid red;
  display: none;
}

#menu-novo li:hover > ul {
  display: block;
}

.menu-novo-link {
  display: block;
}
#menu-novo li ul li ul {
  display: none;
}

#menu-novo li ul li:hover ul{
  display: block;
}
<div id="menu-novo-container">
    <ul id="menu-novo">
        <li class="menu-novo-item"> 1
            <ul class="menu-novo-submenu">
            <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.1</a></li>
            <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.2</a></li>
            <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.3</a></li>
            <li class="menu-novo-item">1.4
                <ul class="menu-novo-sumbenu">
                    <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.1</a></li>
                    <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.2</a></li>
                    <li class="menu-novo-item"><a href="#" class="menu-novo-link">1.4.3</a></li>
                </ul>
            </li>               
            </ul>
        </li>
    </ul>
</div>

I hope this explanation is helpful.

Answer №3

#menu-novo-container {
  font-family: tahoma, Arial, helvetica, Serif;
  border: 1px solid blue;
}

#menu-novo {
  border: 3px solid orange;
}

.menu-novo-item {
  border: 2px solid black;
  cursor: pointer;
}

.menu-novo-link {
  border: 2px solid purple;
}

#menu-novo li>ul {
  border: 1px solid green;
  display: none;
}

#menu-novo li:hover>ul {
  display: flex;
}

.menu-novo-link {
  display: inline-block;
}

Answer №4

If you are experiencing the issue of all ul elements being displayed, it is likely because you have not set the children ul elements to be hidden using the CSS property (display: none;). To fix this, you can add the following missing CSS code:

#menu-novo li ul {
    display:none;
}

#menu-novo li:hover > ul {
    display: block;
}

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

Utilizing Google Maps API version 3 to display various groups of markers

I am encountering an issue while trying to plot fixed markers and a user position marker on a Google Map. I want to use different images for these markers, but something strange is happening. When the page loads, all fixed markers show up correctly initial ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Sending a Boolean value from a child component to its parent state in React JS

Within my application, I have implemented a login feature in the navbar component. However, I am encountering an issue with updating a variable in the main component upon successful login. Although I have successfully managed to set up the login functional ...

javascriptcssreactjsjsx

Issue with JQuery mobile: dynamically inserted popup fails to appear

Can you help me troubleshoot an issue with my function? It's supposed to take a text string and output the text surrounded by '¬¬¬' in a button with a pop-up menu attached. The button looks fine, but when clicked, the popup ul list doesn& ...

javascriptjqueryhtmljquery-mobile

I am facing difficulties accessing an element within a controller in Angular

Struggling to access an element inside an AngularJS controller, I attempted the following: var imageInput = document.getElementById("myImage"); Unfortunately, this approach was unsuccessful as the element returned null. Curiously, when placing the statem ...

javascripthtmlangularjs

Issues with IE7 related to Jquery and potentially HTML as well

I am currently working on a website project for a local charity organization, and I am encountering technical issues with compatibility in IE7. The website functions perfectly in all other browsers I have tested, and it even passes the validation process o ...

javascriptjqueryhtmlcssinternet-explorer-7

PHP script integration with WHMCS

I've been attempting to add analytic.php into head.tpl in WHMCS, but I keep encountering an error. Analytic.php location: root/analytic.php Head.tpl location: root/whmcs/template/six/includes/head.tpl I read that WHMCS supports Smarty PHP, so I&apos ...

javascriptphphtmlsmartywhmcs

Guide on using selenium webdriver (python) to choose, replicate, and insert all content within an element

Currently, I am faced with the task of transferring data from website A to website B as website A is soon going down. This includes not just text, but also images, hyperlinked text, and certain formatting requirements. Previously, the data transfer was don ...

pythonhtmlpython-3.xseleniumcopy-paste

Issue encountered while submitting form on JQuery Mobile framework

Currently, I am in the process of developing a small web application utilizing JQuery Mobile and Multi Page architecture. The issue arises on my form as the second page. Upon clicking the submit button, an error message is displayed on my console (error i ...

javascriptjqueryhtml

Contrast between using sendFile('/index.html') versus render('index') with Jade

As a newcomer to JS, I recently stumbled upon a similar question but with a different perspective. So my inquiry is: What are the advantages of using a Jade template in Express over simply sending raw HTML as a response? In other words, why would one choos ...

htmlnode.jstemplatesexpresspug

CSS Begin the background repeat from a specific origin

I am trying to achieve a specific background effect starting from the line shown in the screenshot below: I attempted to implement it using the following CSS code: background : ('path/to/image') 0 650px repeat-y However, the light part of the ...

htmlcss

Utilizing preg_match in PHP to validate a textarea for alphanumeric characters, numeric values, and spaces

I've almost got everything working, but I'm stuck on how to utilize preg_match. I checked the manual here http://php.net/manual/en/function.preg-match.php, but it doesn't clearly explain the syntax for creating my own validation. For example ...

phpregexhtml

Placement of Buttons Inside a Division Tag

Is there a better way to align button 3 & 4 in a vertical column next to button 1 & 2 without using tables in CSS? See the working example below: https://jsfiddle.net/Jaron787/0te3cs66/1/ Code: HTML <div id="lse" class="display"> <di ...

htmlcss

The problem with div height, the div is not extending to cover the entire body

I am currently working on a slider panel that covers the full height when opened. However, I have encountered an issue where the height remains fixed and the full content is not displayed when setting the body overlay to hidden. More information can be fou ...

htmlcss

What is the reason for hasChildNodes returning true when dealing with an Empty Node?

When the user clicks on purchase and the cart is empty, there should be an alert. However, it seems that no response is triggered. Upon running the program, an error message appears stating that it cannot read the property of addEventListener which is unde ...

javascripthtml

From HTML to Python CGI to communication with a Serial port

I am having an issue running a Python CGI script to send data to a serial port. Whenever I try to open and set the serial port to a variable, the HTML server crashes. Below is the code snippet that receives a color (red, blue, green) from the HTML page: ...

pythonhtmlcgipyserial

How to position one div next to another using CSS and HTML

Hey there, I'm facing an issue with creating a sidenav next to a div containing paragraphs and images. I can't seem to make both the sidenav and the other div appear inline. If anyone has any insights on how to solve this problem or spot what I&a ...

htmlcss

Is there a way to prevent the slide-out bar from automatically hiding when selecting an item from its list?

I am facing an issue with my dashboard that has a slideout sidebar. Whenever I press the toggle button, the sidebar slides out as expected. However, when I click on any tab within the sidebar, it hides again. I only want it to hide when toggled. My code is ...

javascriptjqueryhtmlcss

The selected jquery script is failing to function as intended

I'm currently implementing jQuery chosen in a select element to enhance user experience, however I'm facing an issue when attempting to copy the chosen div to another div using jQuery $(document).ready(function() { $(".chosen").chosen({}); ...

javascriptjqueryhtmlcssjquery-chosen

Tips for adjusting the background color of an ag-grid component in a React application

Looking to make a full background color change in ag-grid within a React application. Experimented with row cell style, but aiming for the entire grid background change. Here is my code snippet: { headerName: "Module Name", field: "ModuleName", ...

cssreactjsag-grid

An issue has been detected where the bullet list is uneven due to the CSS property/value columns being set

Is there a more effective way to split a bulleted list into two columns than the method I am currently using and ensure that the columns are aligned at the top? .hand-bullet-list ul{ list-style-type: none; margin-left: 0px; } .hand-bullet-list ...

htmlwordpresscsscss-multicolumn-layout