Menu

Menu déroulant CSS [Résolu]

Messages postés
2
Date d'inscription
jeudi 16 mai 2019
Statut
Membre
Dernière intervention
17 mai 2019
- - Dernière réponse : uniuc
Messages postés
155
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
17 mai 2019
- 17 mai 2019 à 11:01
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)
Afficher la suite 

Votre réponse

3 réponses

Meilleure réponse
Messages postés
155
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
17 mai 2019
9
1
Merci
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>


--

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 38778 internautes nous ont dit merci ce mois-ci

Commenter la réponse de uniuc
Messages postés
25547
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2019
1976
0
Merci
Bonjour
Merci de poster ton code correctement
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
uniuc
Messages postés
155
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
17 mai 2019
9 -
Bonjour,
Il est dans une balise html
Commenter la réponse de jordane45
Messages postés
2
Date d'inscription
jeudi 16 mai 2019
Statut
Membre
Dernière intervention
17 mai 2019
0
Merci
Merci beaucoup, j'avoue que ça ma échappé ^^' Et bonne continuation a toi ^^ :).
uniuc
Messages postés
155
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
17 mai 2019
9 -
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
Commenter la réponse de AeseNot