Como fazer um text drop?

Preciso fazer um textdrop em html5 e css3. Basicamento isso:

> Pergunta 1

Ao clicar no Pergunta 1, aparecer um texto logo em baixo assim:

> Pergunta 1

>Resposta 1

Eu fiz o código, mas o texto desaparece rapidamente:

HTML:

<nav id="mainnav">
	<ul class="wrapper-menu">
 <li class="wrapper-dropdown">
 <a>PERGUNTA</a>
 <ul class="dropdown">
 <li>Texto Resposta</li>

	CSS:

#mainnav ul{

 list-style: none;
}

#mainnav ul li{

 padding:10px 15px;
 background-color: whitesmoke;
}

.wrapper-menu{
 position:relative;
}

.dropdown{
 position:absolute;
 left:0;
 display:none;
}

.wrapper-dropdown:active > .dropdown{

 display:block;
}