Jaspreet Singh Jaspreet Singh - 11 months ago 33
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{

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>
<li><a href="#">Third</a></li>
<li><a href="#">Fourth</a></li>

Answer Source

You can apply it to the immediate child anchor only:

.main .current-item > a {

More information about the direct descendant selector