nav {
    width: 80%; /* prends la largeur de la page */
    background-color: #2c3e50; /* couleur de fond gris foncé */
    border: solid;
    border-color: white;
    border-inline: initial;
    margin: 15px auto 0px;
    position: relative;
    width: 630px;
    height: 50px;
    border-radius: 8px;
}

    /* suppression des marges et des espacements */
    nav ul {
        margin: 0px;
        padding: 0px;
    }

    /* position du début du menu vers la gauche */
    nav ul li {
        float: left;
        position: relative;
    }

        /* taille et couleur des textes liens du menu */
        nav ul li a {
            padding: 20px 30px; /* espacement hauteur 20px , largeur 30px */
            color: #FFF; /* couleur du texte blanc */
        }

        /* pour diminuer l'espacement en hauteur, afin de supprimer le mouvement au passage de la souris */
        nav ul li:hover a { /* hover = flotter au passage de la souris  */
            padding: 15px 30px; /* espacement hauteur 15px , largeur 30px */
        }

        /* supprime les points de liste */
        nav li {
            list-style-type: none;
        }

        /* action sur l'affichage du menu */
        .submenu {
            display:  none ; /* display = affichage, none = acun */

        }

        /* affichage le ligne et bloc */
        nav a {
            display: inline-block;
            text-decoration: none; /* supprime le souligner des liens */
    }

/* affichage du sous menu lors du survol avec la souris */
nav li:hover .submenu {
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0px;
    padding: 0px;
     z-index: 1000; 
}

/* affichage d'une bordure en bas du sous menu */
.submenu li {
    border-bottom: 1px solid #CCC; /* couleur grise */
    
}

    /* affichage du sous menu */
    .submenu li a {
        padding: 0px;
        font-size: 13px;
        color: #002518;
        width: 160px;
    }

/* affichage des couleurs des menus */
.menu-html:hover { /* bordure du haut, couleur de fond */
    border-top: 5px solid RGB(247, 150, 70); /* orange */
    background-color: RGB(247, 150, 70, 0.20); /* 0.20 = transparence */
}

.menu-php:hover {
    border-top: 5px solid RGB(250, 250, 00); /* jaune */
    background-color: RGB(250, 250, 00, 0.20);
}

.menu-css:hover {
    border-top: 5px solid RGB(75, 172, 198); /* bleu */
    background-color: RGB(75, 172, 198, 0.20);
}

.menu-js:hover {
    border-top: 5px solid RGB(146, 208, 80); /* vert */
    background-color: RGB(146, 208, 80, 0.20);
}

.menu-contact:hover {
    border-top: 5px solid #BBB; /* gris */
    background-color: RGB(220, 220, 220, 0.20);
}

/* couleur de fond des sous menus */
.menu-html .submenu {
    background-color: RGB(247, 150, 70, 0.90) /* orange */
}

.menu-php .submenu {
    background-color: RGB(255, 255, 100, 0.90) /* jaune */
}

.menu-css .submenu {
    background-color: RGB(75, 172, 198, 0.90) /* bleu */
}

.menu-js .submenu {
    background-color: RGB(146, 208, 80, 0.90) /* vert */
}

/* couleur du texte au survol de la souris */
.submenu li:hover a {
    color: #EEE;
    font-weight: bold;
}

/* couleur des sous menus au passage de la souris */
.menu-html .submenu li:hover {
    background-color: RGB(228, 108, 10) /* orange */
}

.menu-php .submenu li:hover { 
    background-color: RGB(210, 200, 00) /* jaune */
}

.menu-css .submenu li:hover {
    background-color: RGB(49, 133, 156) /* bleu */
}

.menu-js .submenu li:hover {
    background-color: RGB(97, 148, 40) /* vert */
}

/* Centrer le menu  */
.table {
    display: table;
    margin: 0px auto;
}