Wordpress Child Them CSS Rule display:none gets overriden

Question

I have this DOM Tree:

<ul id="menu-horizontalnav" class="menu">

    <li id="menu-item-19">

        <ul class="sub-menu">
            <li id="menu-item-99" ></li>

        </ul>
    </li>

</ul>

Now I want that the <ul class="sub-menu"> and his child content is hidden. I added a new .css rule to my style.css file:

enter image description here

But as you can see it gets overriden by this rule:

enter image description here

If I deactivate display: block; everything works.

My Quesiton is how can I add a .css rule which is only valid for the class="sub-menu" without getting this rule overriden by the rule .menu ul

In my Understanding from the .css rules the display: none; rule should override the display: block; rule, because it is deeper in the hiracy

I added my code in the style.css file in my child theme

It gets overridden because the `display:block;` declared latter. — Rahil Wazir, Aug 04 '14 at 08:53

score 1 · Answer 1 · edited Aug 04 '14 at 08:59

1

Add

  hideMenu
  {   
    display:none !important;
  }

Whenever you want to hide , add this class using addClass or just add the property alone.

Whenever you want to remove this, removeClass or remove the property.

edited Aug 04 '14 at 08:59

BoltClock

700,868
160
1,392
1,356

answered Aug 04 '14 at 08:49

Gibbs

21,904
13
74
138

I just impressed for your 246K. U edited my answer. Glad for that – Gibbs Aug 04 '14 at 09:02

score 1 · Accepted Answer · edited May 23 '17 at 12:11

A trivial way would be to overwrite the CSS rule by marking it as important:

.sub-menu {
    display: none !important;
}

But this technique should be avoided if at all possible for various reasons.

The better way would be to explicitely address the place the sub-menu class takes in the DOM hierarchy in your css:

.menu ul.sub-menu {
    display: none;
}

This instruction is more specific than just using .menu ul and will thus be preferred by the browser.

score 1 · Answer 3 · answered Aug 04 '14 at 08:56

1

Just add the following css:

ul .submenu {display:none !important;}

It should solve your problem and override the ul.menu class

answered Aug 04 '14 at 08:56

Philip

395
1
5
15

Wordpress Child Them CSS Rule display:none gets overriden

3 Answers3