Duvida sobre menu html5 css3

Front-end CSS
,
#1

Bom dia, tenho uma duvida, estou querendo criar um menu(horizontal) em que o usuario clicke no item e apareça embaixo o conteudo. Eu sei fazer com o hover, porem este só funciona enquanto o usuário estiver com o mouse em cima do item de menu, como fazer em CSS para que apareça ao clicke do usuário?

Ou terei que fazer um antigo frame? Caso positivo, como faço no html5 CSS3?

Obrigado

#2 
<html>
<head>
	<style>
	* {
		margin: 0;
		padding: 0;
		font-family: Verdana;
		font-size: 95%;
	}

		/*retira os marcadores de listas (bolas) */
	ul {
		list-style-type: none;
	}

		/*configura menu*/
	ul li {
		background-color: #ccc;
		width: 150px;
		height: 30px;
		float: left;
		text-align: center;
		line-height: 30px;
		cursor: pointer;
	}

		/*evento hover, muda cor de fundo*/
	ul li:hover {
		background-color: #fff;
	}

		/*formata sub menu*/
	ul li ul li {
		text-align: left;
		box-sizing: border-box;
		padding-left: 5px;
	}

		/*esconde sub menu*/
	ul li ul {
		display: none;
	}

		/*evento hover, mostra submenu*/
	ul li:hover ul {
		/* display: block; */
	}
	
		/*** menu ***/

		/* esconde os inputs */
	nav input {
		display: none;
	}
		/* evento clique, mostra submenu */
	nav ul li>input:checked + label + ul {
		display: block;
		position: relative;
	}
		/* maximiza o label */
	nav label {
		display:block;
		width: 100%;
		height:100%;
	}
	
		/* cria a magica de fechar o menu */
	nav ul li ul label {
		width:100%;
		height:100%;
		position:fixed;
		left: 0;
		top: 0;
	}
	
		/* passa o subitem e os item a frente do elemento de fechar*/
	nav>ul>li>ul>label{
		z-index: 2;
	}
	
	nav>ul>li>input:checked + label {
		position:relative;
		z-index: 1;
	}
	
	nav>ul>li>label,
	nav>ul>li>ul>li {
		position:relative;
		z-index: 3;
	}
	</style>
</head>

<body>
<nav>
	<ul>
		<li><label for="close">Inicio</label></li>
		<li><label for="close">O Canil</label></li>
		<li>
			<input id="aRaca" type="radio" name="meuMenu" />
			<label for="aRaca">A raça</label>
			<ul>
				<li>Historia</li>
				<li>Padrão</li>
				<li>Curiosidades</li>
				<label for="close"></label>
			</ul>
		</li>
		<li>
			<input id="mes" type="radio" name="meuMenu" />
			<label for="mes">Meses</label>
			<ul>
				<li>Janeiro</li>
				<li>Novembro</li>
				<label for="close"></label>
			</ul>
		</li>
		<li><label for="close">Filhotes</label></li>
		<input id="close" type="radio" name="meuMenu" />
	</ul>
</nav>
</body>
</html>

Não é fácil fazer isso, mas é possível, a ideia é usar um radio escondido que controla qual submenu está ativo usando as ações do label e um cancelar no fundo para quando clicar fora do menu.

1 curtida