[PHP + CSS] Problème de comportement de mon menu deroulant

Signaler
Messages postés
39
Date d'inscription
vendredi 15 juillet 2005
Statut
Membre
Dernière intervention
4 juin 2017
-
Bonjour,

j'ai un problème avec mon menu déroulant.
Le premier menu à un comportement étrange et je ne trouve pas pourquoi.
Je demande donc votre aide.

Le menu s'affiche dans une div qui se trouve dans la div principale qui défini ma page.

Voici les codes :

La page menus.php qui est appelée dans la page principale.
<div id="zone_menu">
 <div id="menuBDM_0" style=" position:absolute; top:5px; width:31px;">
     <a href="./index.php?ACTION=0" title="Lycée Boutet de Monvel">
        <img src="./system/images/home.png" alt="" height="31" />
        </a>
 </div>
 <div style="position:absolute; margin-left:33px; top:5px; ">
  <ul id="menuBDM_1">
   <li><a href="#">L'établissement</a>
    <ul>
     <li><a href="./index.php?ACTION=11" title="11">Le mot du proviseur</a></li>
     <li><a href="./index.php?ACTION=12" title="12">L'organigrame</a></li>
     <li><a href="./index.php?ACTION=13" title="13">Contacts</a></li>
    </ul>
   </li>
  </ul>
 </div>
    <div style="position:absolute; margin-left:248px; top:5px; ">
     <ul id="menuBDM_2">
   <li><a href="#">Les formations</a>
    <ul>
     <li><a href="./index.php?ACTION=21" title="21">La carte des formations</a></li>
     <li><a href="./index.php?ACTION=22" title="22">La filière générale</a></li>
     <li><a href="./index.php?ACTION=23" title="23">La filière technologique</a></li>
     <li><a href="./index.php?ACTION=24" title="24">La filière professionnelle</a></li>
                    <li><a href="./index.php?ACTION=25" title="25">L'enseignement supérieur</a></li>
    </ul>
   </li>
  </ul>
 </div>
    <div style="position:absolute; margin-left:455px; top:5px; ">
     <ul id="menuBDM_3">
   <li><a href="#">La vie scolaire</a>
   <ul>
     <li><a href="./index.php?ACTION=31" title="31">lien sous menu 3</a></li>
     <li><a href="./index.php?ACTION=32" title="32">lien sous menu 3</a></li>
     <li><a href="./index.php?ACTION=33" title="33">lien sous menu 3</a></li>
     <li><a href="./index.php?ACTION=34" title="34">lien sous menu 3</a></li>
    </ul>
   </li>
  </ul>
 </div>
    <div style="position:absolute; margin-left:659px; top:5px; ">
     <ul id="menuBDM_4">
   <li><a href="#">Actualités</a>
    <ul>
     <li><a href="./index.php?ACTION=41" title="41">Lien sous menu 4</a></li>
     <li><a href="./index.php?ACTION=42" title="42">Lien sous menu 4</a></li>
     <li><a href="./index.php?ACTION=43" title="43">Lien sous menu 4</a></li>
     <li><a href="./index.php?ACTION=44" title="44">Lien sous menu 4</a></li>
    </ul>
   </li>
  </ul>
    </div>
    <div style="position:absolute; margin-left:830px; top:5px; ">
     <ul id="menuBDM_5">
   <li><a href="#">Les métiers d'arts</a>
    <ul>
     <li><a href="./index.php?ACTION=51" title="51">Lien sous menu 5</a></li>
     <li><a href="./index.php?ACTION=52" title="52">Lien sous menu 5</a></li>
     <li><a href="./index.php?ACTION=53" title="53">Lien sous menu 5</a></li>
     <li><a href="./index.php?ACTION=54" title="54">Lien sous menu 5</a></li>
    </ul>
   </li>
  </ul>
    </div>
</div>


Le code CSS qui défini les différents blocs de ma page principale (zone_00)

/*------------------------------------------------------*/
/* Définition des zones du site */
/*------------------------------------------------------*/

@charset "UTF-8";
html, body { min-width:1366px; text-align:center; }

/*------------------------------------------------------*/
/* Definition du fond superieur avec */
/* l'image du BEF en répétition. */
/*------------------------------------------------------*/

body { background-image:url("../images/Img_bandeau.png"); background-repeat: repeat-x; }

/*------------------------------------------------------*/
/* Définition de la zon_00 (zone principale) */
/*------------------------------------------------------*/

#zone_00 { position:relative; width:1000px; height:auto; margin-left:auto; margin-right:auto; }

/*------------------------------------------------------*/
/* Definition du bandeau titre dans la zone_00 */
/*------------------------------------------------------*/

#bandeau { position:absolute; width:inherit; height:160px; top:0px; left:0px; }

#bandeau_aca { position:relative; top:25px; left:10px; width:203px; height:101px; }

#bandeau_lyc { position:relative; top:-35px; left:-15px; }

#zone_actualite { display:inline-block; display:inline; padding-left:20px; padding-right:20px; background-color:rgba(255,255,255,0.75); border-style:solid; border-color:#F00; border-width:1px; position:relative; margin-left:auto; margin-right:auto; color:#F00; top:-15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; font-weight:bold; }

/*------------------------------------------------------*/
/* Definition de l'emplacement des menus */
/* dans la zone_00 */
/*------------------------------------------------------*/

#zone_menu { position:relative; top:165px; left:5px; height:55px; z-index:50; }

/*------------------------------------------------------*/
/* Definition de l'emplacement du slideshow */
/* dans la zone_00 */
/*------------------------------------------------------*/

#zone_slide { position:absolute; top:1210px; left:363px; z-index:10; }

/*------------------------------------------------------*/
/* Definition de l'emplacement des racourcis */
/* dans la zone_00 */
/*------------------------------------------------------*/

#zone_raccourcis { position:absolute; top:210px; margin-left:1px; width:160px; height:100%; z-index:50; }

/*------------------------------------------------------*/
/* Définition du retour en haut de page */
/* Fonction liée au script_to_top.bdm.js */
/*------------------------------------------------------*/

#scrollToTop a{
position: fixed;
background: url("../images/btn_up.png") no-repeat ;
right: 20px;
bottom: 20px;
padding: 30px 30px;
}

#scrollToTop a:hover{
background: url("../images/btn_up_surv.png") no-repeat ;
padding: 30px 30px;
}


le code CSS qui défini les menus :

#menuBDM_0, #menuBDM_0 ul,
#menuBDM_1, #menuBDM_1 ul,
#menuBDM_2, #menuBDM_2 ul,
#menuBDM_3, #menuBDM_3 ul,
#menuBDM_4, #menuBDM_4 ul,
#menuBDM_5, #menuBDM_5 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}

#menuBDM_0 li,
#menuBDM_1 li,
#menuBDM_2 li,
#menuBDM_3 li,
#menuBDM_4 li,
#menuBDM_5 li{
display:inline-block;
position:relative;
}

#menuBDM_0 ul li,
#menuBDM_1 ul li,
#menuBDM_2 ul li,
#menuBDM_3 ul li,
#menuBDM_4 ul li,
#menuBDM_5 ul li{
display:inherit;
}

#menuBDM_0 ul,
#menuBDM_1 ul,
#menuBDM_2 ul,
#menuBDM_3 ul,
#menuBDM_4 ul,
#menuBDM_5 ul{
position:absolute;
max-height:0;
left: 0;
right:0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: 1s all .3s;
}

#menuBDM_0 { border-top: 4px solid #D2D6DB}
#menuBDM_1 { border-top: 4px solid #9e1c32}
#menuBDM_2 { border-top: 4px solid #89cddd}
#menuBDM_3 { border-top: 4px solid #55aba8}
#menuBDM_4 { border-top: 4px solid #f28b3c}
#menuBDM_5 { border-top: 4px solid #ffdf50}

#menuBDM_0 li:hover ul,
#menuBDM_1 li:hover ul,
#menuBDM_2 li:hover ul,
#menuBDM_3 li:hover ul,
#menuBDM_4 li:hover ul,
#menuBDM_5 li:hover ul{
max-height:15em;
}

#menuBDM_0 li:first-child { background-color: #fff; }
#menuBDM_1 li:first-child { background-color: #fff; }
#menuBDM_2 li:first-child { background-color: #fff; }
#menuBDM_3 li:first-child { background-color: #fff; }
#menuBDM_4 li:first-child { background-color: #fff; }
#menuBDM_5 li:first-child { background-color: #fff; }

#menuBDM_0 li:first-child li{ background-color: #fff; }
#menuBDM_1 li:first-child li{ background-color: #9e1c32; }
#menuBDM_2 li:first-child li{ background-color: #89cddd; }
#menuBDM_3 li:first-child li{ background-color: #55aba8; }
#menuBDM_4 li:first-child li{ background-color: #f28b3c; }
#menuBDM_5 li:first-child li{ background-color: #ffdf50; }

#menuBDM_1 li:first-child:hover,
#menuBDM_1 li:first-child li:hover{
background:#9E1c32;
}
#menuBDM_2 li:first-child:hover,
#menuBDM_2 li:first-child li:hover{
background:#89cddd;
}
#menuBDM_3 li:first-child:hover,
#menuBDM_3 li:first-child li:hover{
background:#55aba8;
}
#menuBDM_4 li:first-child:hover,
#menuBDM_4 li:first-child li:hover{
background:#f28b3c;
}
#menuBDM_5 li:first-child:hover,
#menuBDM_5 li:first-child li:hover{
background:#ffdf50;
}
#menuBDM_1 a,
#menuBDM_2 a,
#menuBDM_3 a,
#menuBDM_4 a,
#menuBDM_5 a {
text-decoration:none;
display:block;
padding:5px 50px;
color:#000;
font-family:arial;
}

#menuBDM_1 ul a,
#menuBDM_2 ul a,
#menuBDM_3 ul a,
#menuBDM_4 ul a,
#menuBDM_5 ul a {
padding:5px 0;
}

#menuBDM_1 li:hover li a,
#menuBDM_2 li:hover li a,
#menuBDM_3 li:hover li a,
#menuBDM_4 li:hover li a,
#menuBDM_5 li:hover li a{
color:#fff;
text-transform:inherit;
}

#menuBDM_1 li li:hover a,
#menuBDM_2 li li:hover a,
#menuBDM_3 li li:hover a,
#menuBDM_4 li li:hover a,
#menuBDM_5 li li:hover a{
color:#000;
}

#menuBDM_1 li:hover a,
#menuBDM_2 li:hover a,
#menuBDM_3 li:hover a,
#menuBDM_4 li:hover a,
#menuBDM_5 li:hover a{
color:#fff;
}


Pour finir le code de la page principale :

<body>
<div id="zone_00">
<?php include(PAGES.'bandeau.php') ?>
<?php include(PAGES.'menus.php') ?>
<?php include(PAGES.'raccourcis.php') ?>
<?php include(PAGES.'slideshowaccueil.php') ?>
</div>
</body>


Merci d'avance pour votre aide.
Si au passage vous avez des solutions pour améliorer le code je suis preneur car cela fait longtemps que je n'ai plus codé et je n'ai plus les bons réflexes.
--