Responsive Menu sub menu toggle

We are using a custom theme but the menu is standard wordpress. This is about the responsive menu. I want to toggle the display CSS style of a ul.sub-menu if possible using only CSS.

We have a CSS style that when you click on the li, the ul inside it appears, as below.

.responsivewrap ul li:hover ul.sub-menu {display:block !important;}

And I what I want to happen is when you click on the li when the ul is already displayed, to have the ul hidden. I don’t want to have to use jQuery/JavaScript – pure CSS only.

Have tried numerous ideas such as the style below, but this of course overrides the style above.

.responsivewrap ul li a:hover + ul[style*="display: block"] {display:none !important}

Any help will be greatly appreciated, thanks.