j'ai réalisé un menu déroulant avec CSS qui utilise Dropdown
à partir de : https://www.w3schools.com/howto/howto_css_dropdown.asp
Cela marchait très bien, jusqu'au moment où j'ai voulu ajouter bootstrap sur mon site.
En ajouter le CSS bootstrap.min.css
Mon menu n'apparait plus au survol.
J'ai regardé dans le css de bootstrap, et il y a effectivement des info concernant dropdown, mais c'est un peu complexe pour moi, est-ce que quelqu'un a déjà rencontré un problème de ce type, et peut me donner une piste ?
Partie de code :
CSS du menu
Code : Tout sélectionner
.topnav {
background-color: #CFCFC9;
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav .active {
background-color: #7A7A6D;
color: black;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:target, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 800px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 800px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
Html du menu
Code : Tout sélectionner
<div class="topnav" id="myTopnav">
<a href="/" class="active">Accueil</a>
<div class="dropdown">
<button class="dropbtn">VOS CREATIONS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="poemetri.php?cat=pl&choix=tous&tri=datepoeme&debut=0"><img src="images/poesielibremini.jpg" alt="Poésie libre mini" border="0" height="15px" align="absmiddle"> Poésie libre</a>
<a href="poemetri.php?cat=tdm&choix=tous&tri=datepoeme&debut=0"><img src="images/themedumoismini.jpg" alt="Thème du mois mini" border="0" height="15px" align="absmiddle"> Thème du mois</a>
<a href="tableautri.php?galerie=gda&choix=tous&debut=0&tri=datetableau"><img src="images/gdamini.jpg" alt="Galerie d'art mini" border="0" height="15px" align="absmiddle"> Galerie d'art magique</a>
<a href="podcasttri.php"><img src="images/podcastmini.jpg" alt="Podcast mini" border="0" height="15px" align="absmiddle"> Podcast audio/vidéo</a>
<a href="livrecdtri.php"><img src="images/livrecdmini.jpg" alt="Livre cd mini" border="0" height="15px" align="absmiddle"> Livre/CD des membres</a>
</div>
</div>
</div>
Merci d'avance
Eric
