Forum d'entraide: tuto-fr.com

Rebonjour,

j'ai utilisé votre menu déroulant suivant:

http://www.tuto-fr.com/tutoriaux/menu-d … page_5.php

Après deux jours de tâtonnements, je crois enfin avoir réussi à atteindre le résultat visuel correct
sous firefox et IE

pouvez-vous me dire si cela vous pourrez correct techniquement dans les codes

pour décaler, adapter ou centrer la liste des UL j'ai rajouté un div à l'intérieur du div menu, et
pour me simplifier les choses, j'ai superposé deux Div différents pour mon menu en deux colonnes
horizontales

<div id="menu2">
<div class="adaptermenu2">
<?php
include("menu2.php");
?>
</div>
</div>

<div id="menu">
<div class="adaptermenu">
<?php
include("menu.php");
?>
</div>
</div>

LES DEUX CSS POUR CHAQUE COLONNE HORIZONTALE DE MES DEUX DIV MENU SONT PRESQUE IDENTIQUE

CSS
div#menu{width:67%; margin: auto;/*margin-bottom: 40px*/background: #CCCCCC; height: 29px;}
div#menu a {color:#000000;font-weight: bold; font-size: 13px; font-family: Times New Roman, Arial, serif, Georgia; font-style: normal;}
div#menu ul {padding: 0; margin:0; background: white; text-align:center;}
div#menu li {background:#CCCCCC}
div#menu li:hover {background: #EDD}
div#menu li.sousmenu:hover {background: #EBB;}
/* rajout couleure de fond */
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat; background-color:#CCCCCC}
/* rajout pr pour flèche direction bas et couleur de fond*/
div#menu li.plop { background:url(fleche2.gif) 95% 50% no-repeat #CCCCCC;}

/* une petite bordure en top*/
div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid black}

div#menu ul ul {position: absolute; display:none; width:60px;}
div#menu li a {text-decoration: none; padding: 6px 0 6px; display:block;width:60px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu ul.niveau3 {top:-1px; left: 60px;}

/* rajout de couleures de fond et de survol */
div#menu ul.niveau3 li { background: #99CCCC}
div#menu ul.niveau3 li:hover { background: #99CC00}

/*LARGEUR DES SOUS-LISTES (2èmes case) DU MENU VERTICAL*/         
div#menu ul.niveau2 ul {left: 8em;} 
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {width:8em; display:block;}
div#menu ul.niveau2 li a {width: 8em;}

/*LARGEUR DES SOUS-LISTES (3ème case) DU MENU VERTICAL*/
div#menu ul.niveau3 ul {left: 24em;}   
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {width: 24em; display:block;}
div#menu ul.niveau3 li a {width: 24em;}
     
/*LARGEUR DES SOUS-LISTES (4ème case) DU MENU VERTICAL*/
div#menu ul.niveau4 ul {left: 24em;}   
div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 {width: 14em; display:block;}
div#menu ul.niveau4 li a {width: 14em;}

div#menu ul.niveau2 a {width: inherit;} /* width inherit empêche le texte du lien de la sous-liste (2ème case) de
dépasser la largeur définit des UL, ça veut dire que si l'on veut ralonger le texte sans qu'il aille à la ligne,
il est nécessaire d'augmenter la largeur de l'UL*/
div#menu ul.niveau1 a {width: inherit; margin-right: 0.98em;}

.adaptermenu2
{margin-left: 7%}

.adaptermenu
{margin-left: 15%}

div#menu2{width:67%; margin: auto;/*margin-bottom: 1px*/background: #CCCCCC; height: 29px;}
div#menu2 a {color:#000000;font-weight: bold; font-size: 13px; font-family: Times New Roman, Arial, serif, Georgia; font-style: normal;}
div#menu2 ul {padding: 0; margin:0; background: white; text-align:center;}
div#menu2 li {background:#CCCCCC}
div#menu2 li:hover {background: #EDD}
div#menu2 li.sousmenu:hover {background: #EBB;}
/* rajout couleure de fond */
div#menu2 li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat; background-color:#CCCCCC}
/* rajout pr pour flèche direction bas et couleur de fond*/
div#menu2 li.plop { background:url(fleche2.gif) 95% 50% no-repeat #CCCCCC;}

/* une petite bordure en top*/
div#menu2 ul li {position:relative; list-style: none; float:left;/*border-top:1px solid*/}

div#menu2 ul ul {position: absolute; display:none; width:60px;}
div#menu2 li a {text-decoration: none; padding: 6px 0 6px; display:block;width:60px; color: #26157E;}
div#menu2 ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu2 ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu2 ul.niveau3 {top:-1px; left: 60px;}

/* rajout de couleures de fond et de survol */
div#menu2 ul.niveau3 li { background: #99CCCC}
div#menu2 ul.niveau3 li:hover { background: #99CC00}

/*LARGEUR DES SOUS-LISTES (2èmes case) DU MENU VERTICAL*/         
div#menu2 ul.niveau2 ul {left: 8em;} 
div#menu2 ul.niveau1 li.sousmenu:hover ul.niveau2 {width:8em; display:block;}
div#menu2 ul.niveau2 li a {width: 8em;}

/*LARGEUR DES SOUS-LISTES (3ème case) DU MENU VERTICAL*/
div#menu2 ul.niveau3 ul {left: 24em;}   
div#menu2 ul.niveau2 li.sousmenu:hover ul.niveau3 {width: 24em; display:block;}
div#menu2 ul.niveau3 li a {width: 24em;}
     
/*LARGEUR DES SOUS-LISTES (4ème case) DU MENU VERTICAL*/
div#menu2 ul.niveau4 ul {left: 24em;}   
div#menu2 ul.niveau3 li.sousmenu:hover ul.niveau4 {width: 14em; display:block;}
div#menu2 ul.niveau4 li a {width: 14em;}

div#menu2 ul.niveau2 a {width: inherit;} /* width inherit empêche le texte du lien de la sous-liste (2ème case) de
dépasser la largeur définit des UL, ça veut dire que si l'on veut ralonger le texte sans qu'il aille à la ligne,
il est nécessaire d'augmenter la largeur de l'UL*/
div#menu2 ul.niveau1 a {width: inherit; margin-right: 0.98em;}

Dernière modification par nonogemeaux (15-04-2011 13:04:40)