Menu déroulant CSS

Résolu
AeseNot -  
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

  1.  uniuc
    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
    2. AeseNot Auteur
      Merci beaucoup, j'avoue que ça ma échappé ^^' Et bonne continuation a toi ^^ :).
      0
      1. uniuc
        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

    Comment activer le Bluetooth sur une TV Samsung ?
    zaraki490

    110 réponses
    Comment faire afin d'accéder au boot menu ou BIOS sous MSI ?
    Kaheil

    7 réponses
    menu caché
    laurent

    7 réponses
    Mon PC marque press the esc key for startup menu
    Jonas2022

    5 réponses