Search code examples
csssubmenutouchscreen

Close submenu on touch pure CSS3

I'm just wondering if it's possible to close sub-menu by tapping on it's name again? I'm doing a web-site horizontal menu with few sub-menus in it. On li:hover - sub-menu opens, and closes if another element was touched. But how to close same menu by tapping same List item? Is it possible to do this on pure CSS3?..

Thanks.

Solution

  • You can (mis)use an input (checkbox) element with the CSS attribute :checked, so something like:

    .input-list-item + .list-below { display: none; }
.input-list-item:checked + .list-below { display: block; }

    Support in modern browsers and (with the right doctype) IE9+