[Résolu] Décalage menu dérouant par PoilaPoila - page 1

Bonjour à tous,

J'ai un projet dans lequel j'ai décidé de faire un site de vente de produits électro-ménager en ligne et j'ai décidé de faire un menu déroulant en haut du site pour accéder au différents onglets des articles vendus.

J'ai ainsi créer mon menu déroulant, or, lorsque ma souris passe sur "Nos produits", le sous-menu apparaît largement décalé. J'ai beau inspecté mon code je ne repère pas l'erreur. Si vous pouviez m'aidez svp.

Code HTML :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Page de menu</title>
        <meta charset="UTF-8">
            <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li class="menu-produits"><a href="produits.html">Nos produits</a>
                    <ul class="submenu">
                        <li><a href="#">Lave-Vaisselle</a></li>
                        <li><a href="#">Machine à laver</a></li>
                        <li><a href="#">Accessoire</a></li>
                    </ul>
                </li>
                <li class="menu-contact"><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </body>
</html>

Code CSS :

body{
    font-family: "Source code pro", calibri, serif;
    margin: 0px;
    padding: 0px;
}

nav{
    width: 100%;
    background-color: #424558;
}

nav > ul{
    margin: 0px;
    padding: 0px;
}

nav > ul::after{
    content: "";
    display: block;
    clear: both;
}

nav > ul > li{
    float: left;
    position: relative;
}

nav > ul > li > a{
    padding: 20px 30px;
    color: #FFF;
}

nav > ul > li:hover a{
    padding: 15px 30px 20px 30px;
}

nav li{
    list-style-type: none;
}

.submenu{
    display: none;
}

nav a{
    display: inline-block;
    text-decoration: none;
}

nav li:hover .submenu{
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0px:
    padding: 0px;
    z-index: 1000;
}

.submenu li{
    border-bottom: 1px solid #CCC;
}

.submenu li a{
    padding: 15px 30px;
    font-size: 13px;
    color: #222538;
    width: 270px;
}

.menu-produits:hover{
    border-top: 5px solid #0070bb;
    background-color: RGBa(000, 112, 192, 0.15);
}
.menu-contact:hover{
    border-top: 5px solid #f1dc4f;
    background-color: RGBa(241, 211, 79, 0.15);
}
.menu-produits .submenu{
    background-color: RGB(000, 160, 240);
}
.submenu li:hover a{
    color: #EEE;
    font-weight: bold;
}
.menu-produits .submenu li:hover{
    background-color: RGB(000, 115, 200);
}

Décalage menu dérouant

Décalage menu dérouant

Supprimer

Modérer

Signaler le message aux modérateurs