Problem med att gömma/visa divar CSS

Lyckas inte riktigt targeta mina divar som jag vill och hittar inte riktigt felet.
Bygger en meny där en sökruta "div" ska dyka upp vid ett klick men får det inte att fungera.
Har provat flera olika sätt att targeta med utan vidare resultat

Skulle uppskatta om någon vänlig själ kan vägleda mig till en lösning

!OBS! Vill inte använda javascript..

Så här ser koden ut nu..

/*Länkknappen och dess CSS kod*/
<a class="search" href="#">Sök</a>

.search:focus ~ .search-box { display: block; }


/* Diven som ska visas */
<div class="search-box"></div>

/* Divens CSS kod */
.search-box {
	display: none;
	width: 100%;
	height: 80px;
	margin: 0px auto;
	background: #c9c9c9;
}

Plockar jag väck display: none; på search-box så syns den

Vill inte att det ska synas vid hover, utan vid ett klick.
Har försökt googla mig till en lösning men blir inte riktigt klok på detta.

Att diven jag vill dölja/visa ska behöva vara en child tror jag inte ska vara nödvändigt.
Däremot mitt sätt att targeta den på bör nog ändras en aning

.search:focus ~ .search-box { display: block; }

Misstänkte nästan det :/ Blir till att felsöka koden..

Ja men tyvärr så funkar den inte av någon anledning. Det var främsta anledningen till att jag gjorde ett inlägg här ^^

<div>
   <a class="search" href="#">Sök</a>
</div>

<div class="search-box">test</div>

Ja då ligger mitt problem där, har ett eget ramverk vilket jag helst inte vill börja modda/pilla sönder för speciallösningar så får nog bli javascript.

Men tack för hjälpen att identifiera problemet