Выпадающее меню через checkbox

Пример того как можно открыть закрыть блок по клику на чистом css - например для выпадающего меню.

Реализйется с помощь простого чекбокса  (checkbox).

Меню на скрипте - смотреть

====

Випадающее меню с анимацией хрестика:

<!-- Navigacia */-->
		<input type="checkbox" id="chkmenu">
		<label for="chkmenu">	
		<div class="btn-menu"><s></s><s></s><s></s></div>		
		<nav itemscope itemtype="https://www.schema.org/SiteNavigationElement">
			<ul class="menuhed">
			<li itemprop="name"><a itemprop="url" href="http://">Главная страница</a></li>
			<li itemprop="name"><a itemprop="url" href="http://">Гарантии</a></li>
			<li itemprop="name"><a itemprop="url" href="http://">Правила покупки</a></li>
			<li itemprop="name"><a itemprop="url" href="http://">Поддержка</a></li>
			<li itemprop="name"><a itemprop="url" href="http://">Контакты</a></li>
			</ul>
		</nav>
		</label>	

 /*Меню в шапке + мобилка*/
#chkmenu, #chkmenu nav {display:none;}
#chkmenu:checked ~ label > nav{display:block;}
.btn-menu{display:none;width:40px;height:40px;padding:0px;position:absolute;top:5px;right:20px;z-index:615;cursor:pointer;transition:left .23s;transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;}
.btn-menu s{display:block;height:2px;background:#af6f00;margin:10px 0 0;transition:all .1s linear .23s;position:relative;}
#chkmenu:checked ~ label >.btn-menu{top:0;}
#chkmenu:checked ~ label >.btn-menu:before{content:'';}
#chkmenu:checked ~ label >.btn-menu s:nth-of-type(1){transform:rotate(45deg);-webkit-transform:rotate(45deg);top:13px;color:#a7a9ab;}
#chkmenu:checked ~ label >.btn-menu s:nth-of-type(2){opacity:0;}
#chkmenu:checked ~ label >.btn-menu s:nth-of-type(3){transform:rotate(-45deg);-webkit-transform:rotate(-45deg);top:-11px;color:#a7a9ab;}
.menuhed {position:relative; overflow:hidden;  animation:menuhds .5s linear; }
@keyframes menuhds {0% {height:1px;} 100% {height:150px;} }
.menuhed a {color:var(--ssssir);}
.menuhed a::before {content:""; display:inline-block; margin-right:10px; border: 1px solid #fdfdfd;  border-radius: 50%; background-color: rgb(79, 152, 185, 0.5); width: 13px;height: 13px;}
.menuhed a:hover {color:#514f28;}
.menuhed a:hover::before{background-color: rgb(223, 216, 103, 0.9);}

/* ===  MOBIL 1 kolonka 870 === */
@media (max-width: 870px) {
 /*Меню в шапке + мобилка*/
#chkmenu ~ label > nav{display:none;}
.btn-menu{display:block;}

}

Выпадающее меню по клику на слове:

<input type="checkbox" id="nochkk">
	<label for="nochkk">
		<h6>нажми меня</h6>
		<ul>
			<li><a href="">список 1</a></li>
			<li><a href="">список 2</a></li>
			<li><a href="">список 3</a></li>
			<li><a href="">список 4</a></li>
                 </ul>
	</label>

#nochkk{display:none} 
.my-div{background-color:#fff} 
#nochkk:checked ~ label > ul{background-color:#000}