How to change parent style <li> on Hover

Question

I have a WordPress site (on my localhost) that uses <ul> for a custom menu. How to change CSS <li> to hover only if it has a <ul> submenu?

All main menu items have a border radius, and I want to remove this in the current item (Services, below), for example:

  <div class="main-nav"> <ul class="menu" id="menu-main-nav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a> <ul class="sub-menu"> <li><a href="#">Item One</a></li> <li><a href="#>Item Two</a></li> </ul> </li> <li><a href="#>Contact</a></li> </ul> </div> 

I cannot find a solution for CSS, and I also tried jQuery:

  $('ul.sub-menu').parent().hover(function(){ $(this).addClass('no-radius'); }); 

Answer 1

 $('.menu li').has('ul').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); 

Answer 2

 $(".menu LI").hover( function() { if ($("UL", $(this)).length > 0) { $(this).addClass("no-radius"); } }, function() { $(this).removeClass("no-radius"); } ); 

Answer 3

Does it help:

  $ ("li"). hover (function () {
 if ($ (this) .parent (). hasClass ("sub-menu") {
  $ (this) .css ("color", "red");
 }
 });

Answer 4

 $('li>ul.sub-menu').hover(function() { $(this).addClass('no-radius'); }, function() { $(this).removeClass('no-radius'); }); 

In your solution, this refers to the ul element, not its parent.

Instead, this piece of code checks to see if any li direct ul child with class = sub-menu , and then applies the desired class to the li element.

Hope this helps,

Hooray!

Answer 5

 $('ul.sub-menu').parent().hover(function(){ $(this).parent().addClass('no-radius'); }); 

You can always use console.debug ($ (this)) to check which item you are accessing