Change the color of unordered list items only at the same level

Question

Change the color of unordered list items only at the same level

Hey there!
I'm working with this HTML code:

<ul id="nav" class="nav-1"> 
<li><a href="#">Loans</a></li> 
<li><a href="#">Bancassurance</a> 
  <ul class="nav-2"> 
    <li><a href="#">darb</a></li> 
    <li><a href="#">elem</a></li> 
    <li><a href="#">ghad</a></li> 
  </ul> 
</li> 
</ul

I am currently using:

.nav-1 li:hover a {
background:#FF0000; 
}

The background is turning red for all li elements in .nav-1 and .nav-2. I want to limit the red background effect to only .nav-1, not the li and sub-menu.
Any assistance or guidance on this matter?
Thank you for your help

html css

Answer 1

Answer №1

Here is the solution you've been looking for - http://jsfiddle.net/sEYba/2/

Make sure to write your CSS as follows -

.nav-1 li a:hover {
  background:#FF0000;
}
.nav-2 li a:hover {
  background: none;
}

See Demo

Answer 2

Here is the solution you've been looking for - http://jsfiddle.net/sEYba/2/

Make sure to write your CSS as follows -

.nav-1 li a:hover {
  background:#FF0000;
}
.nav-2 li a:hover {
  background: none;
}

See Demo

Answer 3

Answer №2

Your solution should be placed here. By keeping it generic, you can easily incorporate additional items without having to write additional code.

.nav-1 li:hover a {
background:#FF0000; 
}

.nav-1 li:hover ul li a {
background:none; 
}

Answer 4

Your solution should be placed here. By keeping it generic, you can easily incorporate additional items without having to write additional code.

.nav-1 li:hover a {
background:#FF0000; 
}

.nav-1 li:hover ul li a {
background:none; 
}

Answer 5

Answer №3

try out this snippet :

.nav-1 li a:hover{
    background:#FF0000;
}
.nav-1 li li a:hover{
    background:none;
}

Answer 6

try out this snippet :

.nav-1 li a:hover{
    background:#FF0000;
}
.nav-1 li li a:hover{
    background:none;
}

Change the color of unordered list items only at the same level

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to populate a dropdown menu with data and enable users to search for specific items by typing them in?

1 in every 3 divs in jQuery, chosen randomly

Problem with the overflow setting of a specific div

Unable to retrieve the chosen option from the datalist

Guide on making a persistent sidebar using CSS and JavaScript

CSS causing navigation bar drop down content to be hidden when hovering

Using Selenium with C# to input text into an HTML <input> tag is not functioning properly

Troubleshooting: Ineffective use of replace() function on input value with jQuery

Enhance the appearance of 6 image URLs by wrapping them in dynamic divs with the

How to insert additional spacing within an input tag class in dynamic HTML using jQuery

Vertical and floating alignment

Get user input from a textbox and use that input to conduct a search on Google

Geonames weather API experiencing issues retrieving data

Customizing HTML element tags in MUI: Best practices

Tips for locating a specific HTML element within a string

Implementing Sass mixin transition to specifically add transition-delay - a comprehensive guide

When aligning divs at the center, they may not all be perfectly in a straight

Stylish Wave Animation Effects in CSS for iPad Native Application

Utilize the search bar within a JavaScript function

Incorporate a header into the <img> request