How can i target sub-menu class help please

HTML & CSS
1

Hi i have the following html code produced by wordpress menu now i am trying to style the whole ul sub-menu but i cant seem to be able to target that sub-menu ul can someone help out please

I have tried like this but didnt work

#menu-left-side-menu li.current-menu-item ul.sub-menu { background-color:red;}

i also tried just

.sub-menu {  background-color:red;}

here the html menu

<ul class="menu" id="menu-left-side-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82 dcjq-parent-li" id="menu-item-82"><a href="/about-us/" class="dcjq-parent">About us<span class="dcjq-icon"></span> <span class="dcjq-count">(1)</span></a>
        <ul class="sub-menu" style="display: none;">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114" id="menu-item-114"><a href="about-us/company-history/">Company History</a>
            </li>
        </ul>
    </li>
</ul>
2

Well, the ul in contention is set to display:none;

Meaning it’s invisible…

~TehYoyo

3

it use jquery when you click on the title of the menu it becames visible.

you can see working here if you use firefox inspect the menu you should see the sub-menu class, i want to style when its visible
http://themoneymap.zealcreate.co.uk/about-us/

4

Are you messing with the page right now? Stuff seems to be changing.

Also, the menu isn’t even having anything appear on hover right now, even with the display:block value set on :). Set it back to the way it was (I presume the original had it visible on hover)

5

sorry yes i was try to see if i can pick up te sub menu i’ll leave as it is for now for a few mins if you figure how i can style the sub-menu would really appreciate the sub-menu appears when you click on it not on hover.

6

Thank you :). Your li’s and anchors are floated. That’s causing the .sub-menu to not have a height at all. You have two choices :slight_smile:

  1. Add the clearfix to the .sub-menu. Essentially just add this code in to fix everything
.sub-menu:after {    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

Option 2 is to unfloat the dropdowns <li>'s and anchors. Aka

.sub-menu li, .sub-menu li a{float:none!important;}

I added !important here for specificity, however you shouldn’t replicate that exactly. Find a way to add more specificity to it without using !important :). It’ll save maintenance nightmares down the road.

7

Thanks alot RyanReese both solutions did the trick i will try make make without using the important if i can, thanks alot

8

You’re welcome :). Glad I was able to help.