Nao estou conseguindo fazer href nos intens do menu usando id

Front-end
,
#1 
<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">&#9776;</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?

#2

Ja que vc quer que apareça um novo menu poderia colocar uma div em baixo do menu cursos com heigh setado para 0, e com javascript no evento de click no item de curso add os outros links nessa div e setar a heigth dela para auto uma um número que você acha que serve.

#3

Não entendi o seu problema. Me explica melhor, por favor? - Uma imagem, cairia bem…

#4

vou tentar

#5

assim, esse codigo que eu postei é funcional.
mas, ele deveria fazer a funçao de que quando clicar no menu de cursos ou contato, abrir um outro menu com as informaçoes respectivas da opçao.
já configurei o nav de cada um deles, mas ele nao ta fazendo oque deveria fazer

#6

Se ele deveria fazer a função de quando clicar no menu aparecer o submenu vc deveria implementar o código que ao clicar faça isso, não está fazendo porque você não programou isso, pelo menos não mostrou.

a maneira mais fácil é vc colocar um js na sua página e programar um evento de clique nos menus que você quer a funcionalidade.

1 curtida
#7

e como faço sem usar js? só pelo html/css

#8

para não usar js vc precisaria colocar um check button por baixo da sua div que tem de receber o click e verificar se está checado com :checked no css, isso dai simularia um click, mas isso é bem gambiarra e mais dificil doque usar js.
outra maneira seria usar o :hover para simular um click, mas so funcionaria em dispositivos mobile.

#9

E aí, @Fabioreis1415?!

colocar um check button por baixo

Bem criativo, esse método do checkbox. No entanto, tenho que concordar que é uma gambiarra. :joy:

usar o :hover para simular um click, mas so funcionaria em dispositivos mobile.

Esse método só funcionaria em dispositivos que possuem mouse, não? :thinking:

@Yuri_Santana, você queria fazer algo como essa gambiarra abaixo?

Tenta fazer um desenho na mão ou no paint, amigo. Vai dar um norte melhor, pra a gente.

#10

@anon30449818, não sei bem se expliquei direito, mas isso de simular um click com hover so funciona em mobile, porque quando você pass o dedo na tela em cima do elemento isso vira um click no mobile, acabei de fazer isso num cliente aqui, aqui só trabalhamos com sites somente para mobile os famosos m. por isso sei que sempre vai funcionar esses sites so abrem em celulares e tablets.