CODEWITHSUNDEEP
jquerydom
Dirty Bird Design
Dirty Bird Design

Reputation: 5553

Add class to parent li a when drop down is visible

Having a stupid issue, simply want to add a class to an li a when it's sub menu is visible. It is cascading and adding the class to all li a, even the one's in the sub menu.

<ul id="nav">
    <li><a href="#" target="_self">HOME</a></li>
    <li class="dropdown"><a href="#" target="_self">SYSTEM MANAGER<span aria-hidden="true" data-icon="&#xe000;"></span></a>
        <ul>
             <li><a href="#" target="_blank">Link 1</a></li>
        </ul>
    </li>
</ul>

JS

$('li.dropdown').on('mouseenter mouseleave', function(e){
        e.preventDefault();
        if (e.type === 'mouseenter')
            $(this).addClass('hilight');
        else
            $(this).removeClass('hilight');
    });

CSS

body header #headerContain nav#nav-wrap ul#nav li.dropdown.hilight a {
  color: #db4105;
}

How do I get it to apply only to the parent li.dropdown a and not have it cascade to the children li a's?

Upvotes: 0

Views: 223

Answers (1)

Okan Kocyigit
Okan Kocyigit

Reputation: 13421

You should use child-selector, just change your css,

body header #headerContain nav#nav-wrap ul#nav li.dropdown.hilight > a {
  color: #db4105;
}

Upvotes: 2

Related Questions