chiudi il menu a tendina sul click pure css

Ho una barra dei menu con menu a discesa e sottomenu usando puro css..il mio problema è come chiudere / comprimere il menu a discesa quando clicco sul menu a tendina o sul sottomenu .. questo è l’esempio che ho fatto

questo è l’ html

 

questo è il 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; } 

aggiungi questo ( Demo )

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

Penso che questo non sia ansible e per questo scopo dovresti usare javascript. Il CSS per alcune azioni non è la soluzione migliore.