Menu déroulant CSS

Résolu
AeseNot Messages postés 9 Statut Membre -  
uniuc Messages postés 327 Statut Membre -
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)
A voir également:

3 réponses

Réponse 1 / 3
uniuc Messages postés 327 Statut Membre 32
 
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
Réponse 2 / 3
jordane45 Messages postés 40050 Statut Modérateur 4 756
 
Bonjour
Merci de poster ton code correctement
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
0
uniuc Messages postés 327 Statut Membre 32
 
Bonjour,
Il est dans une balise html
0
Réponse 3 / 3
AeseNot Messages postés 9 Statut Membre
 
Merci beaucoup, j'avoue que ça ma échappé ^^' Et bonne continuation a toi ^^ :).
0
uniuc Messages postés 327 Statut Membre 32
 
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
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
menu caché
laurent -
ChariduP -

7 réponses
Supprimer Liste déroulante
Good -
Good -

2 réponses