Jaspreet Singh Jaspreet Singh - 3 months ago 7
CSS Question

Need to fix the Navigation CSS issue?

I want to show bold current menu item only, but if I am trying to bold current menu item, the sub menu items are also getting bold.

my CSS is:

.main .current-item{
font-weight:900;
}


I want to get bold only current menu item which is Second and class is current-item

<ul class="main">
<li><a href="#">First</a></li>
<li class="current-item">
<a href="#">Second</a>
<ul class="sub-menu">
<li><a href="#">Inner First</a></li>
<li><a href="#">Inner Second</a></li>
</ul>
</li>
<li><a href="#">Third</a></li>
<li><a href="#">Fourth</a></li>
</ul>

Answer

You can apply it to the immediate child anchor only:

.main .current-item > a {
    font-weight:900;
}

More information about the direct descendant selector