закрыть выпадающее меню на клик чистой css

У меня есть панель меню с выпадающим меню и подменю, использующая чистую проблему css..my, как закрыть / свернуть раскрывающееся меню, когда я нажимаю на раскрывающееся меню или подменю. Это образец, который я сделал

это html

 

это css

 #headermenu{ width: 90%; height: 20%; margin-right:5%; margin-left:5%; margin-bottom: .5%; } #headermenu ul ul { display: none; } #headermenu ul li:hover > ul { display: block; } #headermenu ul{ padding:0; margin:0; white-space:nowrap; list-style: none; position: relative; display: inline-table; } #headermenu ul li { width:100px; height:45px; float:left; left:0; text-decoration:none; text-align:center; font-family:century gothic; background-color:#fef3e2; } #headermenu ul li:hover { background: #feaa38; } #headermenu ul li:hover a { color: #ffffff; } #headermenu ul li a { color:#feaa38; display: block; text-decoration: none; position: relative; top: 50%; transform: translateY(-50%); } #headermenu ul ul { border-radius: 0px; padding: 0; position: absolute; top: 100%; } #headermenu ul ul li { float: none; background: #b0c7bd; position: relative; } #headermenu ul ul li:hover { background: #aea7a0; } #headermenu ul ul li a { color: #ffffff; } #headermenu ul ul li a:hover { background: #aea7a0; } #headermenu ul ul ul { position: absolute; left: 100%; top:0; } направо #headermenu{ width: 90%; height: 20%; margin-right:5%; margin-left:5%; margin-bottom: .5%; } #headermenu ul ul { display: none; } #headermenu ul li:hover > ul { display: block; } #headermenu ul{ padding:0; margin:0; white-space:nowrap; list-style: none; position: relative; display: inline-table; } #headermenu ul li { width:100px; height:45px; float:left; left:0; text-decoration:none; text-align:center; font-family:century gothic; background-color:#fef3e2; } #headermenu ul li:hover { background: #feaa38; } #headermenu ul li:hover a { color: #ffffff; } #headermenu ul li a { color:#feaa38; display: block; text-decoration: none; position: relative; top: 50%; transform: translateY(-50%); } #headermenu ul ul { border-radius: 0px; padding: 0; position: absolute; top: 100%; } #headermenu ul ul li { float: none; background: #b0c7bd; position: relative; } #headermenu ul ul li:hover { background: #aea7a0; } #headermenu ul ul li a { color: #ffffff; } #headermenu ul ul li a:hover { background: #aea7a0; } #headermenu ul ul ul { position: absolute; left: 100%; top:0; } 

добавить это ( демо )

  #headermenu:active ul ul *{ display:none; } 

Я думаю, что это невозможно, и для этого вам следует использовать javascript. CSS для некоторых действий – не лучшее решение.