Menu déroulant : couleur de fond du parent

Bonjour à tous,

Membre d'une association et étudiant en informatique, j'ai décidé d'entreprendre la création du site internet de celle-ci.

Seulement voila, n'ayant jamais fait de web je dois tout apprendre par moi même.
J'ai suivi quelques tuto très bien fait sur ce site, mais malheureusement après de longues heures de recherche un peu partout sur le web je n'arrive pas à trouver solution à mon problème.

J'ai mis en place un menu tout ce qu'il y a de plus simple.
J'aimerais que lorsque je met mon curseur sur le contenu du sous menu, le background du parent du sous menu change de couleur. Par exemple, lorsque j'ai le curseur sur Presentation, je veux que présentation et Equipes soient de la même couleur. Quand je met le curseur sur Equipe 1, je veux que Sport 1 et equipe 1 soient de la même couleur.

Voici mon code :

<!-- On créer un espace pour l'en-tête -->
<div id="header">
	
	<!-- On creer un espace pour la barre de navigation -->
	<div id="navigation">
		<!-- On creer une nouvelle liste a puce qui seras notre barre de navigation -->
		<ul id="barreNav">
			<!-- Le premier lien de la barre de navigation seras un retour a l'acceuil -->
			<li><a href="index.php">Accueil</a></li>
		    
		    <!-- On va ensuite creer une categorie presentation -->
			<li>
				<a href="#">Présentation</a>
			</li>
		    
		    <!-- On créer une catégorie réservée aux equipes -->    
			<li>
				<a>Equipes</a>
		        <ul>
		        	<li><a href="#">Présentation</a></li>
		            <li><a href="#">Sport 1</a>
		            	<ul>
		            		<li><a href="#">Equipe 1</a></li>
				            <li><a href="#">Equipe 2</a></li>
				        </ul>
				    </li>
				    <li><a href="#">Sport 2</a></li>
		        </ul>
		    </li>
		    
		    <!-- On créer ensuite les autres bouton -->
		    <li><a href="#">FAQ</a></li>
		    <li><a href="http://berzerkersgaming.eu/forum/index.php">Forum</a></li>
		</ul>
	</div>
</div>

Voici mon CSS

#barreNav, #barreNav ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 30px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
        
}

#barreNav /* Ensemble du menu */
{
		/* Modification de l'affichage du texte. */
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial */
        font-size : 12px; /* hauteur du texte : 12 pixels */        
        /* Mise en place des bordures. */
		border-width: 1px; /* On définit leurs l'épaisseurs. */
		border-style: solid; /* On les définient comme solide. */
		border-color: #8F050E; /* On met les bordures en rouge. */
		border-bottom-width: 0; /* On enlève la bordure du dessous. */
		border-top-width: 0; /* Et la bordure du dessus. */
	    border-radius: 0px 0px 6px 6px; /* Arrondissement des coins en bas. */
	    /* Autres. */
	    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); /* Mise en place d'ombres sous la barre */
	    display: -moz-box;
		background: linear-gradient(#C32420, #8F050E) repeat scroll 0 0 transparent; /*Fond de la barre (FF)*/
		background:-webkit-linear-gradient(#C32420 0%, #8F050E 100%); /*Fond de la barre (Chrome, Safari)*/
	    /* margin: 0 0 16px */; /* On met une marge en dessous pour éviter que le reste du site soit collé à la barre */
	    position: relative; /* On lui met un positionnement relatif. */
	    width: 100%;
	    z-index: 10;
}

#barreNav a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */     
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 165px; /* largeur */
}

#barreNav li /* Elements des listes */      
{ 
        float : left; 
        /*width: 164px;/* On lui met 1px de moins que la taille des liens afin qu'il n'y ai pas de bordures rouges. */
       	background: linear-gradient(#C32420, #8F050E) repeat scroll 0 0 transparent; /*Fond de la barre (FF)*/
       	background:-webkit-linear-gradient(#C32420 0%, #8F050E 100%); /*Fond de la barre (Chrome, Safari)*/
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */ 


}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #barreNav li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#barreNav li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
        border-left: 1px solid #8F050E;
        border-radius: 0 0 0 0;
}


#barreNav li ul li /* Éléments de sous-listes */
{
		width: 164px; /* On lui met 1 pixel de moins pour ne pas voir la border. */
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #barreNav li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#barreNav li ul ul 
{
        margin    : -30px 0 0 166px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète  [cligne] */
html>body #barreNav li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}


#barreNav a:hover/* Lorsque la souris passe sur un des liens */    
{
        color: #FFFFFF; /* Le texte ne change pas de couleur. */
        background: #7e0808; /* En revanche, le fond devient plus foncé. */
}


#barreNav li:hover ul ul, #barreNav li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#barreNav li:hover ul, #barreNav li li:hover ul, #barreNav li.sfhover ul, #barreNav li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}
#barreNav ul.active
{
	color: #FFFFFF; /* Le texte ne change pas de couleur. */
        background: #7e0808; /* En revanche, le fond devient plus foncé. */
}

Quelqu'un connait-il la solution à mon problème ?

Merci d'avance et bonne soirée,

Joffrey