<html>
<head>
<meta charset="utf-8"/>
<title>Menu lateral com subitens</title>
<style>
*{
margin: 0;
padding: 0:
}
header{
width: 100%;
height: 50px;
top:0;
left:0;
background-color: #5b859a;
position:fixed;
}
.menu-icon{
position: fixed;
font-size: 25px;
font-weight: bold;
padding: 5px;
width: 40px;
height: 40px;
text-align: center;
background-color:#5b859a;
color: #fff;
cursor: pointer;
transition: all .4s;
left: 300px;
top:0;
}
.menu-icon:hover{
background: #fff;
color: #5b859a;
}
#chk{
display: none;
}
.menu{
height: 100%;
position: fixed;
background: #222;
top: 0;
overflow: hidden;
transition: all .2s;
}
#principal{
width: 300px;
left: -300px;
}
ul{
list-style: none;
}
ul li a{
display: block;
font-size: 18px;
font-family: "Arial";
padding: 10px;
border-bottom: solid 1px #000;
color: #ccc;
text-decoration: none;
transition: all .2s;
}
ul li span{
float: right;
padding-right: 10px;
}
ul li a:hover{
background-color: #5b859a;
}
.voltar{
margin-top:60px;
background-color: #111;
border-left: solid 5px #444;
}
.bg{
width:100%;
height: 100%;
left: 0;
top:0;
position: fixed;
background-color: rgba(0,0,0,.6);
display: none;
}
#chk:checked ~ .bg{
display: block;
}
#chk:checked ~ #principal{
transform: translateX(300px);
}
#cursos,
#contato{
width: 250px;
left: -250px;
}
}
#cursos:target,
#contato:target{
transform: translateX(250px);
box-shadow: 2px 2px 5px 2px rgba?(0,0,0,.5);
}
#conteudo{
}
</style>
</head>
<body>
<header><h1> LEGIO MARIAE</h1></header>
<input type="checkbox" id="chk" >
<label for="chk" class="menu-icon">☰</label>
<div class="bg"></div>
<nav class="menu" id="principal">
<ul>
<li><a href="" class="voltar">Voltar</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#cursos">Cursos <span>+</span></a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#contato">Contato <span>+</span></a></li>
</ul>
</nav>
<nav class="menu" id="cursos">
<ul>
<li><a href="" class="voltar">Voltar</a></li>
<li><a href="">PHP</a></li>
<li><a href="">Ruby</a></li>
<li><a href="">Python</a></li>
</ul>
</nav>
<nav class="menu" id="contato">
<ul>
<li><a href="" class="voltar">Voltar</a></li>
<li><a href="">E-MAIL</a></li>
<li><a href="">Facebook</a></li>
</ul>
</nav>
</body>
</html>
nao consigo fazer com que quando eu clico na opçao de cursos ou contato apareça um novo menu com os itens da opçao cursos ou contatos.
alguem pode me ajudar?