[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>

============================================

Este es otro intento fallido de menú... Cualquiera me serviría...

Código:

<nav>
  <h2>Gastos directos</h2>
<ul id="nav">
  <li><a href="#">Config. y naturaleza</a>
    <ul>
      <li><a href="#">Config 1</a></li>
      <li><a href="#">Config 2</a></li>
    </ul>
  </li>  
  <li><a href="#">Gastos</a>
    <ul>
      <li><a href="#">Gatos indirectos</a></li>
      <li><a href="#">Mantenimientos</a></li>
      <li><a href="#">Inversiones</a></li>
    </ul>
  </li>
  <li><a href="#">Ingresos</a>
   </li>
  </li>
</ul>
</nav>

Código:

nav{
  display: block;
  background-color: #ccc;
   width: 280px;
}
nav h2{
  cursor:pointer;
}
nav h2:hover #nav{
  display: block;
}
#nav {
    float: left;
    width: 280px;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    border-left: 1px solid #999;
  list-style: none;
 
}
#nav li a {
    display: block;
    padding: 10px 15px;
    background: #ccc;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #999;
    text-decoration: none;
    color: #000;
  
}
#nav li a:hover, #nav li a.active {
    background: #999;
    color: #fff;
}
#nav li ul {
    display: none; // used to hide sub-menus
}
#nav li ul li a {
    padding: 10px 25px;
    background: #ececec;
    border-bottom: 1px dotted #ccc;
}