Menu déroulant en CSS

Résolu
Garig -  
 Garig -
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;
}




2 réponses

animostab Messages postés 3003 Statut Membre 738
 
Bonjour
cela doit venir de top:35px; dans ul.niveau2
Si le ul de 2eme niveau ne colle pas au li (1er niveau), la souris sort du li et donc plus de hover --> le ul 2eme niveau reprend sont display:none;
si tu veux un espace met plutot un padding-top.
0
Garig
 
ok merci ça marche bien now
0