Menu déroulant en CSS
Résolu
Garig
-
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;
}
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;
}
A voir également:
- Samira a modifié le menu du jour que juliette lui avait envoyé. retrouvez les modifications proposées par samira : acceptez celles concernant les entrées, refusez celles concernant les plats et les desserts. combien de caractères (en incluant les espaces) contient la version finale du menu ?
- Suivi des modifications word - Guide
- Appliquez à tous les paragraphes du document à télécharger, à l’exception des titres et des sous-titres, la mise en forme suivante : chaque paragraphe doit être espacé de 0,42 cm ou 12 pt du paragraphe qui suit les textes ne doivent pas être en retrait à droite et à gauche après ces modifications, sur quelle page se trouve le titre « la cheminée » dans le chapitre « informations diverses » ? - Guide
- Remplacez le mot eget par le mot désire dans tout le texte. combien de caractères contient le document suite à cette modification (en incluant les espaces) ? - Guide
- Menu déroulant excel - Guide
- Dernière version ccleaner gratuit français - Télécharger - Nettoyage