para passar o mouse em cima do menu e aparecer o submenu posso usar hover no css ... como faço para o submenu aparecer somente quando CLICAR no menu usando css.
para passar o mouse em cima do menu e aparecer o submenu posso usar hover no css ... como faço para o submenu aparecer somente quando CLICAR no menu usando css.
Olá Simone.
Isso é bem fácil de fazer utilizando quase nada de JavaScript. JS é o ideal. Contudo, é possível simular o click só com CSS. Digo simular, pois não há tratamento do evento de click via CSS, como tem com o hover.
O que você pode fazer é criar um checkbox e um label associado a ele. Depois dar um display: none; no checkbox e trabalhar na estilização do label apenas quando o checkbox estiver "checkado". Confuso? Ficará simples com um exemplo.
HTML:
<input type="checkbox" id="meuBotao" />
<label for="meuBotao">Teste</label>CSS:
#meuBotao {
display: none;
}
#meuBotao:checked + label {
font-size: 20px;
color: red;
}Se quiser testar no CodePen, segue o link: https://codepen.io/anon/pen/GvZOxQ
Assim dá pra simular o clique. Você pode trabalhar também com os outros selectors pro #meuBotao, como o próprio :hover, o :active, entre outros.
Aqui segue uma lista de navegadores e suas versões que dão suporte ao selector :checked: