Menu déroulant CSS [Résolu/Fermé]

Signaler
Messages postés
9
Date d'inscription
jeudi 16 mai 2019
Statut
Membre
Dernière intervention
20 mai 2019
-
Messages postés
156
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
18 mai 2019
-
Bonjour, j'ai un soucis. Mon menu déroulant ne veut pas s'effectuer malgré tout les changement que j'ai pu faire, certaine option me font rentrer en conflit avec le titre et autre éléments du site et je bloque complètement. ( Je soupçonne mon code Hover mais je ne trouve pas...)
Aidez moi svp ^^ :).
j'ai fais mon code html comme ceci:

<!DOCTYPE>
<html>
<head>
<title> Accueil </title>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<nav>
<ul id="menu">
<li class="menu-Shop"><a href="Boutique.html">Boutique   </a></li>
<ul class="submenu">
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
</ul>
<li class="menu-Inter"><a href="Intervention domicile.html">Intervention à domicile   </a></li>
<ul class="submenu">
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
</ul>
<li class="menu-Charge"><a href="Prise en charge.html"> Prise en charge   </a></li>
<ul class="submenu">
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
</ul>
<li class="menu-Blog"><a href="Blog.html"> Forum   </a></li>
<ul class="submenu">
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
</ul>
</ul>
</nav>
<h1>Exemple</h1>
</body>
et mon code CSS:

h1{
color: #FFF;
font-size: 70px;
text-align: center;


}
body{
font-family: 'Source code pro', serif;
margin:0px;
padding: 0px;
background-image: url('Hextech/One9353.jpeg')
}
nav > ul{
margin: 0px;
padding: 0px;
}
nav > ul > li{
float: left;

}
nav li{
list-style-type: none;
}
nav{
width: 100%;
background-color: #09004c;
}
nav > ul > li{
float: left;
position: relative;
}
nav > ul::after{
content:"";
display: block;
clear: both;
}
nav a{
display: inline-block;
text-decoration: none;
}
nav > ul > li > a{
padding:20px 30px;
color: #FFF;
}
.submenu{
display: none;
}
nav li:hover .submenu{
display: inline-block;
position: absolute;
top: 100%;
left: auto;
padding: 0px;
z-index: 100000;
}
.submenu li{
border-bottom: 1px solid #CCC;
}
.submenu li a{
padding: 15px 30px;
font-size: 13px;
color: #1e04e0;
width: 270px;
}
.menu-Shop:hover{
border-top: 5px solid #e44d26;
background-color:RGBa(228, 77, 38, 0.15);
}
.menu-Charge:hover{
border-top: 5px solid #0070bb;
background-color:RGBa(000, 112, 192, 0.15);
}
.menu-Inter:hover{
border-top: 5px solid #f1dc4f;
background-color:RGBa(241, 211, 79, 0.15);
}
.menu-Blog:hover{
border-top: 5px solid #BBB;
background-color:RGBa(220, 220, 220, 0.15);
}
.menu-Shop .submenu{
background-color: RGB(230, 100, 40);
}
.menu-Charge .submenu{
background-color: RGB(230, 100, 40);
}
.menu-Inter .submenu{
background-color: RGB(230, 100, 40);
}
.menu-Blog .submenu{
background-color: RGB(230, 100, 40);
}
.submenu li:hover a{
color:#EEE;
font-weight: bold;
}
.menu-Shop .submenu li:hover{
background-color: RGB(210, 77, 60)
}
.menu-Charge .submenu li:hover{
background-color: RGB(000, 115, 200)
}
.menu-Inter .submenu li:hover{
background-color: RGB(200, 165, 75)
}
.menu-Blog .submenu li:hover{
background-color: RGB(200, 165, 75)

3 réponses

Messages postés
156
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
18 mai 2019
6
Bonsoir,
C'est tout à fait normal, tu ne place aucun de tes sous-menu dans tes <li>
teste ainsi
<nav>
<ul id="menu">
<li class="menu-Shop"><a href="Boutique.html">Boutique   </a><!--d'ici tu englobe ton sous-menu-->
<ul class="submenu">
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
</ul>
</li><!--Puis tu le ferme-->
<li class="menu-Inter"><a href="Intervention domicile.html">Intervention à domicile   </a><!--d'ici tu englobe ton sous-menu-->
<ul class="submenu">
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
</ul>
</li>
<li class="menu-Charge"><a href="Prise en charge.html"> Prise en charge   </a>
<ul class="submenu">
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
</ul>
</li><!--Puis tu le ferme-->
<li class="menu-Blog"><a href="Blog.html"> Forum   </a><!--Etc-->
<ul class="submenu">
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
<li><a href="#"> Exemple </a></li>
</ul>
</li>
</ul>
</nav>


--
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 64590 internautes nous ont dit merci ce mois-ci

Messages postés
28878
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 juillet 2020
2 593
Bonjour
Merci de poster ton code correctement
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
Messages postés
156
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
18 mai 2019
6
Bonjour,
Il est dans une balise html
Messages postés
9
Date d'inscription
jeudi 16 mai 2019
Statut
Membre
Dernière intervention
20 mai 2019

Merci beaucoup, j'avoue que ça ma échappé ^^' Et bonne continuation a toi ^^ :).
Messages postés
156
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
18 mai 2019
6
De rien, c'est surtout pour toi bonne continuation, si jamais tu as un doute quand tu fait un menu pense "frogweb"
ce site ramène les bases