Deux menu CSS dans une seul page Web.

Bonjour,

Je suis entrain de développer un site pour un ami.


J'ai besoin de mettre deux menu dans certaine pages.

Un menu dédier à la navigation dans le site et un autre pour la navigation dans les galeries.


Je me suis inspiré d'un menu proposé sur ce site.

Sou Moz les deux menu fonctionne très bien, mais sous IE j'ai un des deux menus qui ne fonctionne pas => http://www.nature-levriers.eu/test/fr/galerie/arcadines/index.php?tpages=1&Tris=1
J'ai essayer de changer les ID des menus (mon code CSS est en deux partie s !)
Avez-vous une idée ?
Je vous remercie par avance de votre aide !
Voici mon code pour le premie menu (je l'ai simplifier pour la taille du post):

<!-- liste imbriquée de liens qui fera office de menu -->
[b]<ul id="menu">[/b]
<!-- Menu 1-->
    <li><a href="#menu1"><FontAffichage>Accueil</FontAffichage></a>
    </li>
 <!-- Menu 2-->
    <li><a href="#menu2"><FontAffichage>Les Lévriers </FontAffichage></a>
        <ul>
            <li><a href="#"><FontAffichage>A venir .... </FontAffichage></a></li>
            <li><a href="#"><FontAffichage>A venir .... </FontAffichage></a></li>
        </ul>
    </li>
</ul>

<script type="text/javascript">
    initMenu();
</script>

Ensuite voici mon deuxième menu avec un petit bout de php (j'ai fais le test avant sans php j'ai le même souci) :

[b]<ul id="menu">
[/b]

 <!-- Menu 1-->
    <li><a href="#menunum">Choisir page :</font></a>
        <ul>


   <?
          global $pages;        //déclaration de la variable global pour la boucle
           $pages=0;      //attribution de la valeur 0 à la variable
           while ($pages!=$nbpage)  //boucle pour l'ffichage des numéros de page
       {
             ?>


            <li>
              <a href="<? echo $NomFile; ?>?tpages=<?echo $AffichePage; ?>&Tris=<? echo $NumTris; ?>" target="_parent"><? echo $AffichePage ?></a> <!--Affichage du lien et des numéros de pages -->
            </li>

             <?
             $AffichePage++;                                                    //incrémentation de 1 de la variable "AffichePage"
             $pages = $pages+1;                                                 //addition de 1 de la variable "pages"
                                                //fonction d'affichage Bis. => Sans la taille de la police
        }
//------------[FIN BOUCLE]------------

?>

        </ul>
    </li>
  </ul>

et voici mon code CSS pour les deux menu =>

/* CSS du menu vertical, bieler batiste */



.menu{                                   /* Menu principale */
    position:absolute;
    /* solve a Opera7/IE display bug */
    width:180px;
    width/**/:180px;
    border-top: 1px #FFFFFF solid;     /* couleur des bordures */
    border-left: 1px #FFFFFF solid;
    border-right: 1px #FFFFFF solid;
    border-bottom: 1px #FFFFFF solid;
    margin:0;
    padding:0;
    }

.menu span{
    display:none;
    }

.menu ul{                                /* Sous Menu  */
    border-top: 1px #FFFFFF solid;       /* couleur des bordures */
    border-left: 1px #FFFFFF solid;
    border-right: 1px #FFFFFF solid;
    border-bottom: 1px #FFFFFF solid;
    margin:0;
    padding:0;
    position:absolute; /* important */
    width:182px;
    width/**/:180px;
    }

.menu li ul{
    visibility:hidden;
    }

.menu li ul{
    margin-left:180px; /* be careful */
    margin-top:-24px;
    }

.menu a{
    text-align:center;
    background-color: #080808;    /* Couleur font du menu pricipal */
    color:#D4D4D4;
    text-weight:bold;
    display:block;
    width:180px;
    border-bottom: 1px #FFFFFF solid;
    text-decoration:none;
    margin:0;
    padding:3px 0 3px 0; /* em units can creat little graphic bug in mozilla */
    }

.menu a:hover{
    background-color: #D4D4D4;
        color:#080808;
    }

/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #aaf;
}

.menu span{
    /* hide some accessibility stuff */
    display:none;
    }

.menu li{
    width:180px;
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    }

/* IE PC selector */
* html .menu li {
    display:inline; /* solve a IE PC list bug */
    float:none; /* solve a IE5 clav nav bug */
    }

a.linkOver{
    background-color: #D4D4D4;
    color:#080808;
    }



/* CSS du menu vertical, bieler batiste */



.menunum{                                   /* Menu principale */
    position:absolute;
    /* solve a Opera7/IE display bug */
    width:80px;
    width/**/:80px;
    border-top: 1px #FFFFFF solid;     /* couleur des bordures */
    border-left: 1px #FFFFFF solid;
    border-right: 1px #FFFFFF solid;
    border-bottom: 1px #FFFFFF solid;
    margin:0;
    padding:0;
    }

.menunum span{
    display:none;
    }

.menunum ul{                                /* Sous Menu  */
    border-top: 1px #FFFFFF solid;       /* couleur des bordures */
    border-left: 1px #FFFFFF solid;
    border-right: 1px #FFFFFF solid;
    border-bottom: 1px #FFFFFF solid;
    margin:0;
    padding:0;
    position:absolute; /* important */
    width:82px;
    width/**/:80px;
    }

.menunum li ul{
    visibility:hidden;
    }

.menunum li ul{
    margin-left:80px; /* be careful */
    margin-top:-24px;
    }

.menunum a{
    text-align:center;
    background-color: #080808;    /* Couleur font du menu pricipal */
    color:#D4D4D4;
    text-weight:bold;
    display:block;
    width:80px;
    border-bottom: 1px #FFFFFF solid;
    text-decoration:none;
    margin:0;
    padding:3px 0 3px 0; /* em units can creat little graphic bug in mozilla */
    }

.menunum a:hover{
    background-color: #D4D4D4;
        color:#080808;
    }

/* for a mozilla better display with key nav */
.menunum a:focus{
    background-color: #aaf;
}

.menunum span{
    /* hide some accessibility stuff */
    display:none;
    }

.menunum li{
    width:80px;
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    }

/* IE PC selector */
* html .menunum li {
    display:inline; /* solve a IE PC list bug */
    float:none; /* solve a IE5 clav nav bug */
    }

a.linkOver{
    background-color: #D4D4D4;
    color:#080808;
    }