Responsive CSS only menu

[jimleeder123]

We've got a responsive menu that when you click on an li the ul inside it is then displayed as a block (displayed as none beforehand). However you cannot then close the ul without refreshing the page or closing the menu itself. 

 

What we want is for when you click the li again, the ul inside it then displays as none. Is this possible using only CSS? (No jQuery please!!!)

 

Any help is greatly appreciated, thanks!

[cyberRobot]

Perhaps the following will work:

http://koen.kivits.com/articles/pure-css-menu/

[jimleeder123]

Its a menu in Wordpress, when you click the link and the sub menu appears, it pushes everything else down so that hack doesn't work. 

 

How it works is you click the li element which makes the ul element inside it appear.  The below code is 2 CSS styles I've got.

/* this makes the sub menu appear */
.responsivewrap ul li:hover ul.sub-menu {display:block !important;} 	
	
/* this is outdone by the above style. If set to important, sub menu won't appear (above style won't work) */
.responsivewrap ul li a:hover + ul[style*="display: block"] {display:none !important}

The first one makes it appear and was there before I started this exercise. The second style is what I've added in.

 

Since I have to use the same element to open AND close the ul element, the 2 styles override each other. The only thing I can think of to counter it is jQuery but we want to use CSS only.

[Muddy_Funster]

It's not a menu element, but an adaptation on this may help you?

[jimleeder123]

I can't see how any of that will be a help, I already know about the pointer-events property.

 

I think jQuery might be the only way since adding classes to open the ul and close it using the same link element causes the styles to cancel the other out.

 

However am open to any ideas for it to be done CSS only.