title: Need to fix the Navigation CSS issue?
body: <p>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.</p>
  
  <p>my CSS is:</p>
  
  <pre><code>.main .current-item{
      font-weight:900;
  }
  </code></pre>
  
  <p>I want to get bold only current menu item which is Second and class is current-item</p>
  
  <pre><code>&lt;ul class="main"&gt;
      &lt;li&gt;&lt;a href="#"&gt;First&lt;/a&gt;&lt;/li&gt;
      &lt;li class="current-item"&gt;
          &lt;a href="#"&gt;Second&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Inner First&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Inner Second&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Third&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Fourth&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>