Bootstrap target parent drom dropdown menu

[donboe]

In my menu I have one li holding a dropdown menu:

<li class="dropdown main-item"><a href="javascript:void(0)" class="services"  data-toggle="dropdown">Diensten<span class="caret"></span></a>                    
	<ul class="dropdown-menu" role="dropdown">
		<li><a href="/onderzoek_strategie">Onderzoek & Strategie</a></li>
        <li><a href="/webdesign_webdevelopment">Webdesign & Ontwikkeling</a></li>
        <li><a href="/internet_marketing">Internet marketing</a></li>
    </ul>
</li>

Right now when i move hover the dropdown menu the parent dropdown main-item is getting a grey background. But I rather would like to have the font color change instead of that background. I have no idea how to target the parent li when hovering over the dropdow-menu. Any help will be highly appreciated.

thank you in advance

[PaulOB]

Hi,

It’s a little awkward to give code when we can’t see the page or the css but generally the top level of a menu is targeted like this.

.menuname li.dropdown:hover > a {background:gray;color:red;}

The important part is that you change the anchor when the list is hovered. This adds persistence to the top level while the submenu is traversed.

Note that you may have a:hover styles which interfere so you may need to address those also and of course check specificity in all those rules.

[donboe]

@PaulOB

.menuname li.dropdown:hover > a {background:gray;color:red;}

Hi Paul. Thank you for tthe reply and answer. You can find the site here

[PaulOB]

Hi,

You seem to be using JS to open the menu by adding a class called.open on hover. Therefore substitute .open for hover and it should work.

e.g.

.navbar li.dropdown.open > a{
    background:transparent;
    color:red;
}