How to Change Style of Parent <li> on Hover
- by Stuart Haiz
I have a WordPress site (on my localhost) that uses a <ul> for a custom menu. How can I change the CSS of a <li> on hover only if it has a <ul> sub-menu?
All the main menu items have a border-radius and I want to remove this on 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 can't find a CSS solution and I've tried jQuery too:
$('ul.sub-menu').parent().hover(function(){
$(this).addClass('no-radius');
});
