Menu déroulant en CSS

Bonjour,

J'ai un problème avec mon menu déroulant : mon panneau se déroule bien quand je passe ma souris dessus. Mais se replie directement dès que je sors.
Il m'est donc impossible de cliquer sur les liens contenus dans le panneau déroulant. Il manque surement une propriété dans mon CSS mais je ne trouve pas laquelle. Voici mon code :

<!-- *******************menu navigation******************** -->
<ul class="niveau1">
<a href="#"><li class="posi">les listes c'est du bloc</li></a>
<a href="#"><li class="posi">les listes c'est du bloc
<ul class="niveau2">
<a href="#"><li class="posi2">html</li></a>
<a href="#"><li class="posi2">css</li></a>
<a href="#"><li class="posi2">php</li></a>
<a href="#"><li class="posi2">xml</li></a>
<a href="#"><li class="posi2">java</li></a>
</ul>
</li></a>
<a href="#"><li class="posi">les listes c'est du bloc</li></a>
<a href="#"><li class="posi">les listes c'est du bloc</li></a>
<a href="#"><li class="posi">les listes c'est du bloc</li></a>
<a href="#"><li class="posi">les listes c'est du bloc</li></a>
<a href="#"><li class="posi">les listes c'est du bloc</li></a>
</ul>


/**************************css**************************/
.posi{
display : inline-block;
list-style-type: none;
padding: 6px 10px;
background-color: rgba(255,120,45,0.5);
}

.posi2{
display : block;
list-style-type: none;
padding: 6px 10px;
background-color: rgba(125,140,45,0.5);
}

.niveau2{
display:none;
}

li.posi{
position:relative;
}

ul.niveau2{
position:absolute;
left:-40px;
top:35px;
}

li.posi2{
width:200px;
font-weight: inherit;
}

li:hover ul.niveau2{
display: block;
}