Bonjour à tous,

Voilà, je me suis lancée dans la conception de menu déroulant, pas bien difficile, mais je veux le personnaliser et j'ai un problème avec les couleurs.
Lorsque l'onglet du menu principal est actif, je n'arrive pas à obtenir la couleur paramétrée pour le menu déroulant, ça me donne la même que pour l'onglet actif.

J'ai simplifié le code pour ne mettre que ce que j'ai fait niveau couleur et bordures (oui, au niveau des bordures, j'ai le même problème concernant l'onglet actif : les valeurs de l'onglet actif sont automatiquement données aux onglets du menu déroulant et impossible de changer).

Si quelqu'un peut m'aider, ça serait super cool ! Merci beaucoup !

#menu ul li /*liste principale*/
{
background-color: #c30710; /*bordeaux*/
}

#menu a
{
color: white;
}

#menu a:hover
{
border-radius: 6px 6px 0px 0px;
color: #fff;
background-color: #424242;
}

#menu ul .active a
{
background-color: #fff; /*blanc*/
color: #666; /*gris*/
border-radius: 6px 6px 0px 0px;
}

#menu ul .active a:hover
{
border-radius: 6px 6px 0px 0px;
color: #fff;
background-color: #424242;
border-color: #424242;
}

#menu li ul /*sous-liste*/
{
position: absolute;
width: 102px;
left: -999em; /*on envoie loin du champ de vision*/
vertical-align: top;
margin-left: -42px;
overflow: hidden;
border-bottom: 0px;
}

#menu li ul li
{
background-color: #B1B5BA; /*gris*/
border-radius: 0;
border-color: #B1B5BA;
opacity: 1;
padding-bottom: 2px;
margin: auto;
}

#menu li ul a:hover
{
border-radius: 0;
color: #fff;
background: #424242; /*gris foncé*/
border: #424242;
cursor: pointer;
}

#menu ul .active a:hover + ul a
{
background-color: #B1B5BA; /*gris*/
border-radius: 0;
border-color: #B1B5BA;
color: #fff;
}