There is a list with a sublist attached to it. Interested in how to use styles to make sure that when you hover on only a menu item with a sub-list, the area is highlighted in yellow - it is the entire area along with the item itself! Code and Fidl

ul { list-style: none; } ul.main:hover li.second.current, ul.main:hover ul { background-color: yellow; } .second { display: inline-block; background-color: #000; color: white; } .second.current { background-color: red; } 
 <ul class="main"> <li class="second current">Пункт 1 <ul> <li>Подпункт 1</li> <li>Подпункт 2</li> <li>Подпункт 3</li> </ul></li> <li class="second">Пункт 2</li> <li class="second">Пункт 3</li> </ul>
Now when you hover over any item in the list, the area is highlighted, and you only need it for a specific item.

  • And what do you want to get something? Remove the second property ul.main:hover ul , is it the same? - borodatych
  • @borodatych and what happens? not exactly the answer to the question - Vasya

3 answers 3

Like what you need:

 ul { list-style:none; } li.second.current:hover, li.second.current:hover + ul { background-color: yellow; color: black } .second { display:inline-block; background-color:#000; color:white; } .second.current { background-color:red; } 
 <ul class="main"> <li class="second current"> Пункт 1 </li> <ul class="hovered"> <li>Подпункт 1</li> <li>Подпункт 2</li> <li>Подпункт 3</li> </ul> <li class="second">Пункт 2</li> <li class="second">Пункт 3</li> </ul>

  • Something does not work, does not satisfy the conditions of the author, my code did the same. only without changing the DOM of the tree - Vasily Barbashev

If correctly understood that:

It:

 ul.main:hover li.second.current, ul.main:hover ul { background-color: yellow; }

Change it to this. If you hover over an item only, the inner area of ​​the li block will be highlighted, and if you hover over the list, the glow will disappear

 li.second.current:hover + ul { background-color:yellow; } 

 ul { list-style: none; } li.second.current:hover + ul { background-color:yellow; } .second { display: inline-block; background-color: #000; color: white; } .second.current { background-color: red; } 
 <ul class="main"> <li class="second current">Пункт 1</li> <ul> <li>Подпункт 1</li> <li>Подпункт 2</li> <li>Подпункт 3</li> </ul> <li class="second">Пункт 2</li> <li class="second">Пункт 3</li> </ul>

Or so, if you need to choose everything:

Changed to:

 li.second.current:hover + ul, ul.hovered:hover { background-color: yellow; } 

 ul { list-style:none; } li.second.current:hover + ul, ul.hovered:hover { background-color: yellow; } .second { display:inline-block; background-color:#000; color:white; } .second.current { background-color:red; } 
 <ul class="main"> <li class="second current"> Пункт 1 </li> <ul class="hovered"> <li>Подпункт 1</li> <li>Подпункт 2</li> <li>Подпункт 3</li> </ul> <li class="second">Пункт 2</li> <li class="second">Пункт 3</li> </ul>

  • Comments are not intended for extended discussion; conversation moved to chat . - Nick Volynkin ♦

At least you don't have the correct markup. The child ul li does not lie inside the parent li.

Slightly changed the markup ( feed ):

 ul { list-style: none; } li.second.current:hover, li.second.current:hover span { background-color: yellow; } .second span { display: inline-block; background-color: #000; color: white; } .second.current > span { background-color: red; } 
 <ul class="main"> <li class="second current"> <span>Пункт 1</span> <ul> <li>Подпункт 1</li> <li>Подпункт 2</li> <li>Подпункт 3</li> </ul> </li> <li class="second"><span>Пункт 2</span></li> <li class="second"><span>Пункт 3</span></li> </ul>

  • Duck, in the comments in the first answer noted already ... - borodatych
  • @dluhhbiu and no span in any way? I asked in question styles .. i.e. without editing html and without scripts - Vasya
  • @borodatych sorry but what did they answer? - Vasya