CSS - Simplifying the Process of Creating Multi-Level Menus

Question

CSS - Simplifying the Process of Creating Multi-Level Menus

I have a multi-level menu that I want to customize with the following specifications:

Same background color (#5b740d)
Same active background color (red)
Same hover background color (red)

The code I found on the internet was too complex, so I tried to simplify it myself. However, when I hover over one item, another item is also affected. This bug needs fixing.

Please help me simplify my CSS code and resolve the issue of incorrect hover effects. Any assistance would be greatly appreciated.

Here is the link to my current code: http://jsfiddle.net/SWF6w/

html css

Answer 1

Answer №1

I don't see a need to simplify this any further, as the code is already concise and well-structured. Your request for making it simpler doesn't seem necessary.

To resolve the issue of red hover on child elements, you can use a direct descendent selector in your li:hover a rule. Here's an example:

.menu li ul li:hover > a {
    background: red;
}

By applying this modification, you will achieve the desired result > http://jsfiddle.net/SWF6w/1/

Answer 2

I don't see a need to simplify this any further, as the code is already concise and well-structured. Your request for making it simpler doesn't seem necessary.

To resolve the issue of red hover on child elements, you can use a direct descendent selector in your li:hover a rule. Here's an example:

.menu li ul li:hover > a {
    background: red;
}

By applying this modification, you will achieve the desired result > http://jsfiddle.net/SWF6w/1/

Answer 3

Answer №2

Make the following change in the code snippet provided:

.menu li li ul li a:hover {
    background: red;
}
.menu li ul li:hover a {
    background: red;
}

Replace it with this updated version:

.menu li li ul li>a:hover {
    background: red;
}
.menu li ul li:hover>a {
    background: red;
}

You can view the revised code on jsFiddle here: http://jsfiddle.net/SWF6w/2/

Answer 4

Make the following change in the code snippet provided:

.menu li li ul li a:hover {
    background: red;
}
.menu li ul li:hover a {
    background: red;
}

Replace it with this updated version:

.menu li li ul li>a:hover {
    background: red;
}
.menu li ul li:hover>a {
    background: red;
}

You can view the revised code on jsFiddle here: http://jsfiddle.net/SWF6w/2/

CSS - Simplifying the Process of Creating Multi-Level Menus

Answer №1

Answer №2

Similar questions

Animate css style using setTimeout: "in the blink of a moment"

Tips for eliminating any default white space visible between tags:

What is the best way to create a scrollable Material UI modal and dialog?

Unable to choose an option from the panel

What is the best method for accommodating various web devices effectively?

Connect two cells in a table by incorporating a vertical line in between the rows. Merge header cells

tips for generating a random number for direct display

FancyBox: Struggling to adjust dimensions accurately

When the "x" close icon is clicked, the arrow should toggle back to 0 degrees

The jQuery datepicker function is limited to a single use when integrated with Angular

Perform a Selenium action to click on each individual HTML 'a' tag on

Achieving a stacked arrangement of divs upon click-through using only pure JavaScript

Smooth transition of an arrow moving in a continuous loop using CSS animations

Issue with z-index in Internet Explorer version 7

Creating Sub Menu in Blogger with pageListJSON

Is there a way I can link a variable to a URL for an image?

Unable to remove div element

Challenging glitch in the JavaScript code

The table in React does not update after sorting the elements in the state, causing the list to not re-render

Display a JQuery dropdown menu depending on the ID of the current section