ul{
  position:relative;

 /* On supprime les puces pour les elements LI de la balise */
  list-style:none;

 /* On s'assure qu'il n'y aura aucun décalage autour du menu
  * NOTE : il faut définir le padding ET le margin car dans le cadre des listes à
  *        puces. Les différents navigateurs utilisent l'une ou l'autre des valeurs
  *        pour afficher les puces et assurer les retraits des elements.
  */
  padding: 0px;
  margin: 0px;

 /* On définie la largeur et la hauteur de la balise en fonction des dimensions de l'image de fond
  width:174px;
  height:183px;                       */

 /* On definit le background de la balise
    background: url(base.gif) no-repeat left top;     */
}


/** LA BALISE A **
 * ------------- *
 * La balise A va nous permettre de définir les attributs communs à chaque element du menu
 */
#menuxx a{
   /*  color: aqua;        */
   color:#4E99E6;
   width:174px;
 /* La balise est déclarée en position "absolute" afin de pouvoir positionner nos elements
  * de menu au pixel près à l'interieur de la balise UL.
  */
  position:absolute;

 /* En temps normal, la balise A est une balise "inline". Pour les besoin de ce menu, nous
  * la transformons en balise "block"
  */
  display:block;

 /* Quoi qu'il arrive par la suite, toutes les balises A seront accoler au bord gauche de
  * leur conteneur : la balise UL
  */
  left:0px;

 /* De même, quoi qu'il arrive, les balise A auront toute une hauteur de base de 12px
  * NOTE : Cette hauteur dépend de l'image de fond qui sera utilisée, ainsi que de la taille
  *        de la police typographique qui sera utilisée.
  */
  height:12px;

 /* On supprime le soulignement par défaut des liens */
  text-decoration:none;

 /* On definie les valeurs typographiques du texte de la balise */
  font:   /*bold */ italic 12px Verdana,Helvetica,Arial,sans-serif;
 /* color:#00FFFF;                                                                             provisoire pour essai

 /* Le Z-index nous permettra d'être sûr qu'une balise A sera toujour par dessus
  * toute autre balise que l'on pourrais definir. Cette valeur est necessaire pour
  * Assuré la compatibilité avec Mozilla/Firefox.
  */
    z-index:2;

 /* Pour eviter les problèmes de prechargement et d'eventuel scintillement, toutes les puces
  * sont mises sur une seul image. Cette image est placé en background sur toutes les balises A.
  */
    background: url(puces2y.gif) no-repeat top left;
}


/** LA PSEUDO-CLASS :hover **
 * ------------------------ *
 * La pseudo-class :hover va nous permettre de définir les attributs communs à chaque balise A
 * survolée par la souris
 * NOTE : IE comprend la pseudo-class :hover uniquement lorsqu'elle est appliquée a la balise A
 */
#menuxx a:hover{
 /* On redéfinie la couleur de la police typographique */
  color: red;

 /* On fixe la largeur de la balise
  * NOTE : Cette largeur dépend de l'image de fond utilisée.
  */
  width:174px;

 /* Le Z-index nous permettra de nous assurer qu'une balise A survolée sera toujours en arrière plan
  * par rapport à une balise A non survolée. En effet, nous verrons par la suite que certaines balises
  * seront amenées à se chevaucher.
  */
  z-index:1;
}

/** LE CAS PAR CAS **
 * ---------------- *
 * Les modifications globals de balises etant définies, nous allons maintenant nous attaquer
 * aux cas particuliers grace à l'utilisation des identifiants uniques de classes
 * NOTE : Tous les identifiants suivant sont appliqués à des balises A, ils héritent donc tous des
 *        comportements definis ci-dessus pour la balise A et pour la pseudo-classe associée :hover
 */

#menu1{
 /* Cet element de menu sera placé à 35px du bord haut de son conteneur : la balise UL */
  top: 35px;

 /* Le texte sera décallé de 58px vers la droite tout en laissant apparaitre le background de la balise */
  padding-left: 58px;

 /* On redéfinie le positionnement du background de la balise pour afficher la portion de background
  * necessaire pour cet element de menu spécifique
  */
  background-position: 0% 0%;
}

#menu1:hover{
 /* Lors du survol de la balise, la portion de background visible sera plus importante, on modifie donc
  * la proriété top et on conserve la position du texte en jouant sur le padding-top
  * NOTE : C'est ce petit truc qui nous contrains à utiliser un Z-index. En effet, dans ce cas, on risque
  *        de voir deux balises A se chevaucher. Donc, il faut toujours s'assurer que la balise qui est
  *        survolée sera bien en dessous des balises non-survolées afin que celles-ci ne soit pas cachées
  *        par la balise survolée.
  */
  top: 0px;
  padding-top: 35px;

 /* On redéfinie le positionnement du background de la balise pour afficher la portion de background
  * necessaire pour cet element de menu spécifique
  */
  background-position: 0% -72px;
}

/* Il ne reste plus qu'à répéter ces opérations pour chaque element de menu individuel */

#menu2{
  top: 53px;
  padding-left: 57px;
  background-position: 0% -12px;
}

#menu2:hover{
  top: 0px;
  padding-top: 53px;
  background-position: 0% -119px;
}

#menu3{
  top: 71px;
  padding-left: 54px;
  background-position: 0% -24px;
}

#menu3:hover{
  top: 0px;
  padding-top: 71px;
  background-position: 0% -184px;
}

#menu4{
  top: 89px;
  padding-left: 50px;
  background-position: 0% -36px;
}

#menu4:hover{
  top: 0px;
  padding-top: 89px;
  background-position: 0% -267px;
}

#menu5{
  top: 107px;
  padding-left: 44px;
  background-position: 0% -48px;
}

#menu5:hover{
  top: 0px;
  padding-top: 107px;
  background-position: 0% -368px;
}

#menu6{
  top: 125px;
  padding-left: 37px;
  background-position: 0% -60px;
}

#menu6:hover{
  top: 0px;
  padding-top: 125px;
  background-position: 0% -487px;
}

#menu7{
  top: 143px;
  padding-left: 31px;
  background-position: 0% -60px;
}

#menu7:hover{
  top: 0px;
  padding-top: 143px;
  background-position: 0% -624px;
}