Sujet Précédent Sujet Suivant

Menu déroulant CSS

Résolu/Fermé
AeseNot Messages postés 9 Date d'inscription jeudi 16 mai 2019 Statut Membre Dernière intervention 20 mai 2019 - 16 mai 2019 à 21:56
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 - 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)
A voir également:

3 réponses

Réponse 1 / 3
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 8
17 mai 2019 à 03:20
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 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
16 mai 2019 à 22:54
Bonjour
Merci de poster ton code correctement
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
0
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 8
17 mai 2019 à 10:59
Bonjour,
Il est dans une balise html
0
Réponse 3 / 3
AeseNot Messages postés 9 Date d'inscription jeudi 16 mai 2019 Statut Membre Dernière intervention 20 mai 2019
17 mai 2019 à 10:13
Merci beaucoup, j'avoue que ça ma échappé ^^' Et bonne continuation a toi ^^ :).
0
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 8
17 mai 2019 à 11:01
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
les entrées et les sortées
oussman -
MarsuGL -

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

8 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses