 <p>What I find works in these situations is toggling class names instead of directly setting 'display: block'. This prevents the need for crazy selectors or using !important.</p> <pre><code>/* the default is display:block, so all we need is this one class */ .closed { display: none; } </code></pre> <hr> <pre><code>&lt;li class="collapsable"&gt; &lt;ul class="treeview"&gt; &lt;li class="collapsable"&gt; &lt;ul class="treeview" class="closed"&gt; </code></pre>