Targeting an element when it has a class added to it

Hi there,

I have a mobile menu that has a sub menu for some items. However, is not working for some reason.

This is my code:

image

As you can see there is an active class which is supposed to display the sub menu. This class is added when the main item is clicked to display the sub items.

Currently the ul.sub-menu has a display:none

What I am trying to do is give the sub-menu a display: block when the active class is present.

I have tried the following, but it’t not working.

button.active > ul.sub-menu{
	display: block
}

Can anyone assist in what I have wrong?

Thanks!

Hi there toolman,

notwithstanding that you should, to help members, always
supply code instead of images of code, this code ,

button.active > ul.sub-menu{
	display: block
}

…should be…

button.active + ul.sub-menu {
	display: block
}

…or…

button.active  ~ ul.sub-menu{
	display: block
}

coothead

3 Likes

Hi,

Thanks for the reply.

This is the one that did it :slight_smile:

Thank you.

The site is a WordPress site and has lots of CSS/HTML in so I thought it would be easier to just show the lines I was focusing on rather than pasting a load of lines that may not have anything to do with the menu.

Thanks again :slight_smile:

 
 
    No problem, you’re very welcome. :winky:

 
coothead

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.