Raven Raven - 3 years ago 154
CSS Question

How to hide this list item using CSS

How to hide the "Discussion" item from the list?

<div id="psp-primary-header" class="psp-grid-row cf">
<nav class="nav psp-masthead-nav" id="psp-main-nav">
<ul>
<li id="nav-menu"><a href="#" class="">Menu</a>
<ul>
<li id="nav-milestones"><a href="#psp-phases" class="">Phases</a> </li>
<li id="nav-talk"><a href="#psp-discussion" class="">Discussion</a> </li>
<li id="nav-logout"><a href="https://www.google.com">Logout</a> </li>
</ul>
</li>
</ul>
</nav>




I tried this, but didn't work:

#nav-talk {display:none !important};

Answer Source

You may have a specificity issue.

Try

#psp-primary-header > #psp-main-nav > #nav-talk {display:none;}

Then remove the parent IDs one at a time to find where the specificity conflict is.

For example, if you were to also have:

.nav #nav-menu li {display:inline-block !important;}

That would be applied over:

#nav-talk {display:none !important;} 

With #nav-talk having display:inline-block

See the difference between Id vs More Specific

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download