[SOLUCIONADO] menu display:none

[lamenenchu]

Buenas a todos. A ver si podéis echarme un cable. Pq no veo por donde está el paso que me falta.

Mi idea es hacer un menú desplegable que al hacer :hover y clicar sobre el elemento padre, se despliegue el resto del menú.

Pero no consigo hacer el paso del padre. Mejor dejo el código pq no me estoy explicando muy bien.

Gracias

Código:

body {
	height: calc(100% - 20px);
	width: calc(100% - 20px);
	margin: 0;
	padding: 10px;
	display: flex;
	background: #f2f2f2;
	color: rgba(0,0,0,.87);
	font-family: 'Roboto', sans-serif;
}
.accordion {
	margin: auto;
	width: 400px;
}
.accordion input {
	display: none;
}
.box {
	position: relative;
	background: white;
    height: 64px;
    transition: all .15s ease-in-out;
}
.box::before {
    content: '';
    position: absolute;
    display: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	
    pointer-events: none;
    box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
}
header.box {
	background: #00BCD4;
	z-index: 100;
	cursor: initial;
	height: 44px;
	box-shadow: 0 -1px 0 #e5e5e5,0 0 2px -2px rgba(0,0,0,.12),0 2px 4px -4px rgba(0,0,0,.24);
}
header .box-title {
	margin: 0;
	font-weight: normal;
	font-size: 16pt;
	color: white;
	cursor: pointer;
}
.box-title {
	width: calc(100% - 40px);
	height: 34px;
	line-height: 34px;
	padding: 0 20px;
	display: inline-block;
	cursor: pointer;
}
.box-content {
	width: calc(100% - 40px);
	padding: 10px 10px;
	font-size: 11pt;
	color: rgba(0,0,0,.54);
	display: none;
}
.box-close {
	position: absolute;
	height: 64px;
	width: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
	display: none;
}
input:checked + .box {
	height: auto;
	
  
}
input:checked + .box .box-title {
	border-bottom: 1px solid rgba(0,0,0,.18);
}
input:checked + .box .box-content,
input:checked + .box .box-close {
	display: inline-block;
}

Código:

<nav class="accordion">
		<header class="box">
			<label for="acc-close" class="box-title">Gastos indirectos</label>
		</header>
		<input type="radio" name="accordion" id="cb1" />
		<section class="box">
			<label class="box-title" for="cb1">Config. y naturaleza</label>
			<label class="box-close" for="acc-close"></label>
			<div class="box-content"><li><a href="">Click .</a></li>
			<li><a href="">Click2 .</a></li></div>
		</section>
		<input type="radio" name="accordion" id="cb2" />
		<section class="box">
			<label class="box-title" for="cb2">Gastos</label>
			<label class="box-close" for="acc-close"></label>
			<div class="box-content"><li><a href="">Gastos directos</a></li>
			<li><a href="">Mantenimientos</a></li>
			<li><a href="">Inversiones</a></li></div>
		</section>
		
		<section class="box">
			<label class="box-title" for="cb3">Ingresos</label>
			<label class="box-close" for="acc-close"></label>
			<label class="box-close" for="acc-close"></label>
			
		</section>

		<input type="radio" name="accordion" id="acc-close" />
	</nav>