N'arrive pas à obtenir un menu déroulant

J'ai réglé une partie de mon problème. Je n'ai ainsi, plus de puces devant les différentes sections de mon menu et sous menu.
J'ai, pour cela, remplacé les dièses par des points dans le code CSS.
Cependant, je n'ai pas encore réussi, entre autre, à passer d'un menu vertical à un menu horizontal.
Modifié par spip93 (28 Oct 2012 - 13:00)

Re-bonjour tout le monde,
J'ai changé mon fusil d'épaule; je suis passé par un générateur de menu CSS (donc pas besoin d'un javascript)
J'ai ainsi (voir ci-dessous), en modifiant quelques lignes de code dans celui qui a été généré, pu m'approcher de mon modèle :
http://img254.imageshack.us/img254/7495/menuprincipalresultat2.png

Cependant, comme vous pouvez le voir, j'ai un souci en 1 puisque ça dépasse dès que j'ai deux lignes.
En 2 (je ne sais pas si on voit bien), j'ai une barre de séparation à droite du bouton contact, alors qu'il ne devrait pas y en avoir.
Enfin, je souhaiterai que mon sous-menu se développe en 3 colonnes, or, comme vous pouvez le voir, ça n'est pas le cas.

Je vous joins les deux codes (CSS et HTML) pour que vous compreniez mieux mon problème

<div class="global">
    <div id='menu'>
    <ul>
       <li><a href='index.php'><span>Accueil</span></a></li>
       <li class='has-sub '><a href='#'><span>Menu 1</span></a>
          <ul>
             <li><span>Section 1 sous-menu</span></li>
             <li><a href='#'><span>- Sous menu 1</span></a></li>
             <li><a href='#'><span>- Sous menu 2</span></a></li>
             <br />
             <li><span>Section 1 sous-menu</span></li>
             <li><a href='#'><span>- Sous menu 3</span></a></li>
             <li><a href='#'><span>- Sous menu 4</span></a></li>
             <li><a href='#'><span>- Sous menu 5</span></a></li>
             <li><a href='#'><span>- Sous menu 6</span></a></li>
             <li><span>Section 1 sous-menu</span></li>
             <li><a href='#'><span>- Sous menu 7</span></a></li>
             <li><a href='#'><span>- Sous menu 8</span></a></li>
             <li><a href='#'><span>- Sous menu 9</span></a></li>
             <li><a href='#'><span>- Sous menu 10</span></a></li>
             <li><a href='#'><span>- Sous menu 11</span></a></li>
             <li><a href='#'><span>- Sous menu 12</span></a></li>
             <li><a href='#'><span>- Sous menu 13 </span></a></li>
             <li><a href='#'><span>- Sous menu 14</span></a></li>
             <li><a href='#'><span>- Sous menu 15</span></a></li>
             <li><a href='#'><span>- Sous menu 16</span></a></li>
             <li><a href='#'><span>- Sous menu 17</span></a></li>
             <li><a href='#'><span>- Sous menu 18</span></a></li>
             <li><a href='#'><span>- Sous menu 19</span></a></li>
          </ul>
       </li>
       <li><a href='#'><span>Menu sur<br />2 lignes 2</span></a></li>
       <li><a href='#'><span>Menu sur<br />2 lignes 3</span></a></li>
       <li><a href='#'><span>Menu sur<br />2 lignes 4</span></a></li>
       <li><a href='#'><span>Menu 5</span></a></li>
       <li><a href='#'><span>Contact</span></a></li>
    </ul>
    </div>
</div>

#menu{ 
    height:37px;
    width: 952px;
    display:block;
    margin:92px auto 6px;
    border:1px solid;
    border-radius:5px;
    } 
#menu > ul {
    list-style:inside none;
    padding:0;
    margin:0;
    } 
#menu > ul > li {
    list-style:inside none;
    width: 136px;
    padding:0;
    margin:0;
    float:left;
    display:block;
    position:relative;
    } 
#menu > ul > li > a{
    outline:none;
    display:block;
    position:relative;
    padding:12px 20px;
    font:bold 14px/100% Trebuchet MS, sans-serif;
    text-align:center;
    text-decoration:none;
    } 
#menu > ul > li:first-child > a{
    border-radius:5px 0 0 5px;
    } 
#menu > ul > li > a:after{
    content:'';
    position:absolute;
    border-right:1px solid;
    top:-1px;
    bottom:-1px;
    right:-2px; 
    } 
#menu ul li.has-sub:hover > a:after{
    top:0;
    bottom:0;
    } 
#menu > ul > li.has-sub > a:before{
    content:'';
    position:absolute;
    top:18px;
    right:6px;
    border:5px solid transparent;
    border-top:5px solid #fff;
    } 
#menu > ul > li.has-sub:hover > a:before{
    top:19px;
    } 
#menu ul li.has-sub:hover > a{
    background:#F7931E;
    border-color:#F7931E;
    padding-bottom:13px;
    padding-top:13px;
    top:-1px;
    } 
#menu ul li.has-sub:hover > ul, #menu ul li.has-sub:hover > div{
    display:block;
    } 
#menu ul li.has-sub > a:hover{
    background:#F7931E;
    border-color:#F7931E;
    } 
#menu ul li > ul, #menu ul li > div{
    display:none;
    width:auto;
    position:absolute;
    top:38px;
    padding:10px 0;
    background:#F7931E;
    border-radius:0 0 0 0;
    } 
#menu ul li > ul{
    width:675px;
    } 
#menu ul li > ul li{
    display:block;
    list-style:inside none;
    padding:0;
    margin:0;
    position:relative;
    }
#menu ul li > span{
    outline:none;
    display:block;
    position:relative;
    margin:0;
    padding:0px 10px;
    font:bold 12pt Trebuchet MS, sans-serif;
    color:#fff;
    text-decoration:none;
    }  
#menu ul li > ul li a{
    outline:none;
    display:block;
    position:relative;
    margin:0;
    padding:0px 20px;
    font:10pt Trebuchet MS, sans-serif;
    color:#250050;
    text-decoration:none;
    } 
#menu, #menu > ul > li > ul > li a:hover{
    background:-moz-linear-gradient(90deg, #FACB2B, #F89E1B, #FFF1E0) no-repeat;
    } 
#menu{
    border-color:#F7CEA6;
    } 
#menu > ul > li > a{
    border-right:1px solid #F7CEA6;
    color: #250050;;} 
#menu > ul > li > a:after{
    border-color:#ff723b;
    } 
#menu > ul > li > a:hover{
    background:-moz-linear-gradient(90deg, #F68E1E, #FACB2B) no-repeat;
    }

Quelqu'un pourrait-il SVP, m'aider parce que là je commence à sécher ?
Merci beaucoup, par avance, pour votre aide

Bonsoir,

Pour les trois colonnes, sans tester, je dirais qu'il faut mettre chaque section dans une liste (ul) dédiée puis appliquer un display:inline-block sur chacune d'entre elles afin de les avoir les unes à côté des autres. Et comme ces colonnes n'ont pas la même hauteur, il faudra aussi leur appliquer un vertical-align: top;.

Bon, comme je dis : à tester. C'est juste ce que je ferais à première vue...

Pour la bordure en trop après "contact", essayer :

#menu > ul > li > a:last-child {border-right:none;}

Si ça ne marche pas c'est que je n'ai pas ciblé le bon sélecteur css, mais la suite du code doit fonctionner (pas toujours facile à cerner le bon sélecteur avec juste la lecture du code en brut...).

PS : sinon je trouve que le css est un peu sursélectionné : jusqu'à 4 niveaux de sélecteurs, ça commence à faire beaucoup. Mais bon...
Modifié par Olivier C (28 Oct 2012 - 22:40)

Bonsoir à tous et à toutes,

Tout d'abord merci Olivier pour votre réponse.
Avant votre réponse, j'ai réussi à passer en 3 colonnes.
Voici d'ailleurs ce que ça donne :
http://img836.imageshack.us/img836/8035/menuprincipalresultat3.png
Pour cela, j'ai attribué une classe par colonne (menu_gauche, menu_centre, menu_droite). Ensuite, modifié les paramètres.
Voici les codes HTML et CSS pour y parvenir :

<div class="global">
    <div id='menu'>
    <ul>
       <li><a href='index.php'><span>Accueil</span></a></li>
       <li class='has-sub '><a href='#'><span>Menu 1</span></a>
          <ul>
             <li class='menu_gauche'><span>Section 1 sous-menu</span></li>
             <li class='menu_gauche'><a href='#'><span>- Sous menu 1</span></a></li>
             <li class='menu_gauche'><a href='#'><span>- Sous menu 2</span></a></li>
             <br />
             <li class='menu_gauche'><span>Section 1 sous-menu</span></li>
             <li class='menu_gauche'><a href='#'><span>- Sous menu 3</span></a></li>
             <li class='menu_gauche'><a href='#'><span>- Sous menu 4</span></a></li>
             <li class='menu_gauche'><a href='#'><span>- Sous menu 5</span></a></li>
             <li class='menu_gauche'><a href='#'><span>- Sous menu 6</span></a></li>
             
             <li class='menu_centre'><span>Section 1 sous-menu</span></li>
             <li class='menu_centre'><a href='#'><span>- Sous menu 7</span></a></li>
             <li class='menu_centre'><a href='#'><span>- Sous menu 8</span></a></li>
             <li class='menu_centre'><a href='#'><span>- Sous menu 9</span></a></li>
             <li class='menu_centre'><a href='#'><span>- Sous menu 10</span></a></li>
             <li class='menu_centre'><a href='#'><span>- Sous menu 11</span></a></li>
             <li class='menu_centre'><a href='#'><span>- Sous menu 12</span></a></li>
             <li class='menu_centre'><a href='#'><span>- Sous menu 13 </span></a></li>
             <li class='menu_centre'><a href='#'><span>- Sous menu 14</span></a></li>
             <li class='menu_centre'><a href='#'><span>- Sous menu 15</span></a></li>
             
             <li class='menu_droite'><a href='#'><span>- Sous menu 16</span></a></li>
             <li class='menu_droite'><a href='#'><span>- Sous menu 17</span></a></li>
             <li class='menu_droite'><a href='#'><span>- Sous menu 18</span></a></li>
             <li class='menu_droite'><a href='#'><span>- Sous menu 19</span></a></li>
          </ul>
       </li>
       <li><a href='#'><span>Menu sur<br />2 lignes 2</span></a></li>
       <li><a href='#'><span>Menu sur<br />2 lignes 3</span></a></li>
       <li><a href='#'><span>Menu sur<br />2 lignes 4</span></a></li>
       <li><a href='#'><span>Menu 5</span></a></li>
       <li><a href='#'><span>Contact</span></a></li>
    </ul>
    </div>
</div>

#menu{ 
    height:37px;
    width: 952px;
    display:block;
    margin:92px 6px 6px;
    border:1px solid;
    border-radius:5px;
    } 
#menu > ul {
    list-style:inside none;
    padding:0;
    margin:0;
    } 
#menu > ul > li {
    list-style:inside none;
    width: 136px;
    padding:0;
    margin:0;
    float:left;
    display:block;
    position:relative;
    } 
#menu > ul > li > a{
    display:block;
    position:relative;
    padding:12px 20px;
    font:bold 14px/100% Trebuchet MS, sans-serif;
    text-align:center;
    text-decoration:none;
    } 
#menu > ul > li:first-child > a{
    border-radius:5px 0 0 5px;
    } 
#menu > ul > li > a:after{
    content:'';
    position:absolute;
    border-right:1px solid;
    top:-1px;
    bottom:0px;
    right:-2px;
    } 
#menu ul li.has-sub:hover > a:after{
    top:0;
    bottom:0;
    } 
#menu > ul > li.has-sub > a:before{
    content:'';
    position:absolute;
    top:18px;
    right:6px;
    border:5px solid transparent;
    border-top:5px solid #fff;
    } 
#menu > ul > li.has-sub:hover > a:before{
    top:19px;
    } 
#menu ul li.has-sub:hover > a{
    background:-moz-linear-gradient(90deg, #F68E1E, #FACB2B) no-repeat;
    border-color:#F7931E;
    padding-bottom:13px;
    padding-top:13px;
    top:-1px;
    } 
#menu ul li.has-sub:hover > ul, #menu ul li.has-sub:hover > div{
    display:block;
    } 
#menu ul li.has-sub > a:hover{
    background:-moz-linear-gradient(90deg, #F68E1E, #FACB2B) no-repeat;
    border-color:#F7931E;
    }
    
#menu ul li > ul, #menu ul li > div{
    display:none;
    position:absolute;
    top:38px;
    padding:10px 0;
    background:#F7931E;
    border-radius:0 0 0 0;
    } 
#menu ul li > ul{
    width:675px;
    height: 170px;
    } 
#menu ul li > ul li{
    display:block;
    list-style:inside none;
    padding:0;
    margin:0;
    position:relative;
    }
#menu ul li > span{
    outline:none;
    display:block;
    position:relative;
    margin:0;
    padding:0px 10px;
    font:bold 12pt Trebuchet MS, sans-serif;
    color:#fff;
    text-decoration:none;
    }  
#menu ul li > ul li a{
    outline:none;
    display:block;
    position:relative;
    margin:0;
    padding:0px 20px;
    font:10pt Trebuchet MS, sans-serif;
    color:#250050;
    text-decoration:none;
    } 
#menu, #menu > ul > li > ul > li a:hover{
    background:transparent;
    }
#menu, #menu > ul > li:hover{
    background:-moz-linear-gradient(90deg, #FACB2B, #F89E1B, #FFF1E0) no-repeat;
    } 
#menu{
    border-color:#EA8723;
    } 
#menu > ul > li > a{
    border-right:1px solid #EA8723;
    color: #250050;
    } 
#menu > ul > li > a:after{
    border-color:#F7CEA6;
    } 
#menu > ul > li > a:hover{
    background:-moz-linear-gradient(90deg, #F68E1E, #FACB2B) no-repeat;
    }
.menu_gauche {
  position: absolute;
  left: 1%;
  width: 220px;
}
.menu_centre {
  position: absolute;
  top: -170px;
  left: 33%;
  width: 220px;
}
.menu_droite {
  position: absolute;
  top: -331px;
  right: -66%;
  width: 220px;
}

J'ai ainsi réglé certains problèmes, mais pas notamment celui de la bordure après contact (même après avoir mis votre code Olivier, et changé le sélecteur (j'ai pas cherché très longtemps non plus)) ou ceux des barres qui dépassent quand mon libellé de menu est sur 2 lignes.
Si vous (Olivier ou quelqu'un d'autre) avez des idées, je suis preneur.
Sur ce, je vais me coucher.

Encore merci

spip93 a écrit :
J'ai ainsi réglé certains problèmes, mais pas notamment celui de la bordure après contact (même après avoir mis votre code Olivier, et changé le sélecteur (j'ai pas cherché très longtemps non plus)) ou ceux des barres qui dépassent quand mon libellé de menu est sur 2 lignes.

C'est vrai que c'est vraiment difficile à déterminer sans le code source. Mais ce qui est sûr c'est que le code est bon. J'ai utilisé ce même procédé sur mon site, à la différence prêt que je l'ai appliqué sur le premier élément de la liste (donc :fist-child) étant donné que mes border sont à gauche (border-left, et non boder-right comme les vôtres).

Bien à vous

Merci infiniment Olivier pour tout ces conseils.
Étant donné que je suis débutant, que c'est mon premier site en tant que programmeur, il est clair que j'ai fais (et ferais encore sans doute) des erreurs.
C'est pourquoi je remercie les personnes qui, comme toi, m'aide(ro)nt à les corriger et ainsi progresser.

Je vais revoir mon code en espérant qu'il soit le plus clean et le plus pro possible.
Une fois fait, je publierai ce code pour "correction"

Encore merci pour ces conseils.
Bonne journée

Re-bonjour Olivier,

Alors, j'ai fait ce que vous m'aviez dit, à savoir :
- supprimer les <span>
- passer les titres de sections en <h2>
- passer mes sections en vertical-align: top
- passer mes sections en display:inline-block
Cependant, en appliquant cette dernière modif (display:inline-block) voici ce que j'obtiens :
http://img37.imageshack.us/img37/1016/menuprincipalresultat4.png
D'un autre côté, je l'ai peut-être pas appliqué au bon endroit.
Du coup, voici ce que j'ai fait (en HTML) :

<div class="global">
    <div id='menu'>
    <ul>
       <li><a href='index.php'>Accueil</a></li>
       <li class='has-sub '><a href='#'>Menu 1</a>
          <ul>
          <div id="menu_gauche">
              <li><h2>Section 1 sous-menu</h2></li>
              <li><a href='#'>- Sous menu 1</a></li>
              <li><a href='#'>- Sous menu 2</a></li>
             <br />
              <li><h2>Section 2 sous-menu</h2></li>
              <li><a href='#'>- Sous menu 3</a></li>
              <li><a href='#'>- Sous menu 4</a></li>
              <li><a href='#'>- Sous menu 5</a></li>
              <li><a href='#'>- Sous menu 6</a></li>
          </div>
          <div id="menu_centre">
              <li><h2>Section 3 sous-menu</h2></li>
              <li><a href='#'>- Sous menu 7</a></li>
              <li><a href='#'>- Sous menu 8</a></li>
              <li><a href='#'>- Sous menu 9</a></li>
              <li><a href='#'>- Sous menu 10</a></li>
              <li><a href='#'>- Sous menu 11</a></li>
              <li><a href='#'>- Sous menu 12</a></li>
              <li><a href='#'>- Sous menu 13 </a></li>
              <li><a href='#'>- Sous menu 14</a></li>
              <li><a href='#'>- Sous menu 15</a></li>
          </div>
          <div id="menu_droite">
              <li><a href='#'>- Sous menu 16</a></li>
              <li><a href='#'>- Sous menu 17</a></li>
              <li><a href='#'>- Sous menu 18</a></li>
              <li><a href='#'>- Sous menu 19</a></li>
          </div>
          </ul>
       </li>
       <li><a href='#'>Menu sur<br />2 lignes 2</a></li>
       <li><a href='#'>Menu sur<br />2 lignes 3</a></li>
       <li><a href='#'>Menu sur<br />2 lignes 4</a></li>
       <li><a href='#'>Menu 5</a></li>
       <li><a href='#'>Contact</a></li>
    </ul>
    </div>
</div>

Puis sur mon code CSS :

/* MENU */
#menu{ 
    height:37px;
    width: 952px;
    display:block;
    margin:92px 6px 6px;
    border:1px solid;
    border-radius:5px;
    } 
#menu > ul {
    list-style:inside none;
    padding:0;
    margin:0;
    } 
#menu > ul > li {
    list-style:inside none;
    width: 136px;
    padding:0;
    margin:0;
    float:left;
    display:block;
    position:relative;
    } 
#menu > ul > li > a{
    display:block;
    position:relative;
    padding:12px 20px;
    font:bold 14px/100% Trebuchet MS, sans-serif;
    text-align:center;
    text-decoration:none;
    } 
#menu > ul > li:first-child > a{
    border-radius:5px 0 0 5px;
    } 
#menu > ul > li > a:after{
    content:'';
    position:absolute;
    border-right:1px solid;
    top:-1px;
    bottom:0px;
    right:-2px;
    } 
#menu ul li.has-sub:hover > a:after{
    top:0;
    bottom:0;
    } 
#menu > ul > li.has-sub > a:before{
    content:'';
    position:absolute;
    top:18px;
    right:6px;
    border:5px solid transparent;
    border-top:5px solid #fff;
    } 
#menu > ul > li.has-sub:hover > a:before{
    top:19px;
    } 
#menu ul li.has-sub:hover > a{
    background:-moz-linear-gradient(90deg, #F68E1E, #FACB2B) no-repeat;
    border-color:#F7931E;
    padding-bottom:13px;
    padding-top:13px;
    top:-1px;
    } 
#menu ul li.has-sub:hover > ul, #menu ul li.has-sub:hover > div{
    display:block;
    } 
#menu ul li.has-sub > a:hover{
    background:-moz-linear-gradient(90deg, #F68E1E, #FACB2B) no-repeat;
    border-color:#F7931E;
    }
    
#menu ul li > ul, #menu ul li > div{
    display:none;
    position:absolute;
    top:38px;
    padding:10px 0;
    background:#F7931E;
    border-radius:0 0 0 0;
    } 
#menu ul li > ul{
    width:675px;
    height: 170px;
    } 
#menu ul li > ul li{
    display:inline-block;
    list-style:inside none;
    padding:0;
    margin:0;
    position:relative;
    }
#menu ul li > h2{
    outline:none;
    display:inline-block;
    position:relative;
    margin:0;
    padding:0px 10px;
    font:bold 12pt Trebuchet MS, sans-serif;
    color:#fff;
    text-decoration:none;
    }  
#menu ul li > ul li a{
    outline:none;
    display:inline-block;
    position:relative;
    margin:0;
    padding:0px 20px;
    font:10pt Trebuchet MS, sans-serif;
    color:#250050;
    text-decoration:none;
    } 
#menu, #menu > ul > li > ul > li a:hover{
    background:transparent;
    }
#menu, #menu > ul > li:hover{
    background:-moz-linear-gradient(90deg, #FACB2B, #F89E1B, #FFF1E0) no-repeat;
    } 
#menu{
    border-color:#EA8723;
    } 
#menu > ul > li > a{
    border-right:1px solid #EA8723;
    color: #250050;
    } 
#menu > ul > li > a:after{
    border-color:#F7CEA6;
    } 
#menu > ul > li > a:hover{
    background:-moz-linear-gradient(90deg, #F68E1E, #FACB2B) no-repeat;
    }
#menu_gauche {
  position: absolute;
  left: 1%;
  width: 220px;
}
#menu_centre {
  position: absolute;
  vertical-align: top;
  left: 33.8%;
  width: 220px;
}
#menu_droite {
  position: absolute;
  vertical-align: top;
  right: 1%;
  width: 220px;
}

Comme vous pouvez le voir, j'ai divisé mon sous-menu en 3 div :
-menu_gauche
-menu_centre
-menu_droite
auxquelles j'ai appliqué :
- un vertical-align: top;
- la même largeur (width: 220px;)
Ce qui me donne ceci :
http://img819.imageshack.us/img819/2548/menuprincipalresultat5.png

Du coup, (je pense que) j'ai réussi à obtenir un code "relativement" clean tout en ayant un sous-menu en 3 colonnes. Qu'en pensez-vous ?

Sinon, pour le <br /> au milieu de ma liste, certes, ça ne fait ni pro ni propre, mais je n'ai pas trouvé mieux pour sauter une ligne.

Enfin, à ma décharge, il ne faut pas oublier qu'une grande partie de ce code a été généré par un générateur de menu et que je l'ai modifié à ma sauce. Ceci explique (mais n'excuse en rien, je vous l'accorde) que mon code ne soit pas aussi clean que ça.
Modifié par spip93 (01 Nov 2012 - 15:37)

Et oui pardon, il manquait un truc (et aussi désolé pour le retard de la réponse) : il vous fallait aussi une largeur fixe pour la div englobante de chaque colonne...

Sinon (pour une prochaine fois?) sachez que vous auriez très bien pu donner la même class aux trois div et cibler celles-ci par ce que l'on appelle des sélecteurs de proximité.

Voici un exemple que j'ai appliqué pour le sommaire de mon site (par contre, exit la compatibilité avec IE6 et IE7) :

.column {//votre code pour la colonne type}
.column + .column {//votre code avec juste les modif's pour la deuxième colonne}
.column + .column + .column {//votre code avec juste les modif's  pour la troisième colonne}

Vous auriez aussi pu utiliser :first-child ou :last-child (je les utilises très souvent elles aussi). Là encore, pas de comptabilité avec IE6 (mais bon : IE6...).

De manière générale, référez-vous à cet article.

Bien à vous
Modifié par Olivier C (02 Nov 2012 - 23:41)

Bon ça y est, j'y suis "presque" arrivé.
J'ai une nouvelle fois, tout repris depuis le début (à partir du tuto d'Antoine Estève (Toinouz) ici. Merci à lui au passage )
Voici ce que ça donne :
http://img194.imageshack.us/img194/492/menuprincipalresultat6.png

Voici le code HTML :

<div class="global">
    <div id='menu'>
    <ul>
       <li class="menu_accueil"><a href='index.php'>Accueil</a></li>
       <li><a href='#'>Menu 1</a>
          <ul>
          <div id="menu_gauche">
              <li><h2>Section 1 sous-menu</h2></li>
              <li><a href='#'>- Sous menu 1</a></li>
              <li><a href='#'>- Sous menu 2</a></li>
             <br />
              <li><h2>Section 2 sous-menu</h2></li>
              <li><a href='#'>- Sous menu 3</a></li>
              <li><a href='#'>- Sous menu 4</a></li>
              <li><a href='#'>- Sous menu 5</a></li>
              <li><a href='#'>- Sous menu 6</a></li>
          </div>
          <div id="menu_centre">
             <li class='menu_centre'><h2>Section 3 sous-menu</h2></li>
             <li class='menu_centre'><a href='#'>- Sous menu 7</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 8</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 9</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 10</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 11</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 12</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 13 </a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 14</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 15</a></li>
          </div>
          <div id="menu_droite">
              <li><a href='#'>- Sous menu 16</a></li>
              <li><a href='#'>- Sous menu 17</a></li>
              <li><a href='#'>- Sous menu 18</a></li>
              <li><a href='#'>- Sous menu 19</a></li>
          </div>
          </ul>
       </li>
       <li><a href='#'>Menu sur<br />2 lignes 2</a>
       <ul>
          <div id="menu_gauche">
              <li><h2>Section 1 sous-menu</h2></li>
              <li><a href='#'>- Sous menu 1</a></li>
              <li><a href='#'>- Sous menu 2</a></li>
             <br />
              <li><h2>Section 2 sous-menu</h2></li>
              <li><a href='#'>- Sous menu 3</a></li>
              <li><a href='#'>- Sous menu 4</a></li>
              <li><a href='#'>- Sous menu 5</a></li>
              <li><a href='#'>- Sous menu 6</a></li>
          </div>
          <div id="menu_centre">
             <li class='menu_centre'><h2>Section 3 sous-menu</h2></li>
             <li class='menu_centre'><a href='#'>- Sous menu 7</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 8</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 9</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 10</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 11</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 12</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 13 </a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 14</a></li>
             <li class='menu_centre'><a href='#'>- Sous menu 15</a></li>
          </div>
          <div id="menu_droite">
              <li><a href='#'>- Sous menu 16</a></li>
              <li><a href='#'>- Sous menu 17</a></li>
              <li><a href='#'>- Sous menu 18</a></li>
              <li><a href='#'>- Sous menu 19</a></li>
          </div>
          </ul>
       </li>
       <li><a href='#'>Menu sur<br />2 lignes 3</a></li>
       <li><a href='#'>Menu sur<br />2 lignes 4</a></li>
       <li><a href='#'>Menu 5</a></li>
       <li class="menu_contact"><a href='#'>Contact</a></li>
    </ul>
    </div>
</div>

Ce code HTML n'a pas beaucoup changé, si ce n'est que j'ai (dû) virer la classe has-sub. Par contre, j'ai appliqué une classe aux boutons "Accueil" et "Contact" de façon à avoir un coin arrondi à mon menu, même quand je passe la souris (parce qu'avant ça n'était pas le cas).
De plus, il est un peu plus long car j'ai recopié le 1er sous-menu dans le "menu sur 2 lignes 1" (je sais pas si je suis clair, mais j'expliquerai un peu plus loin pourquoi j'ai fait ça).

Et voici le code CSS (avec certains de mes commentaires, mais aussi ceux d'Antoine Estève) :

#menu /* Liste */     
{  
    height:37px;
    width: 951px;
    display:block;
    margin:92px 6px 6px;
    border:1px solid; /* Bordure extérieure ensemble menu */
    border-color: #EA8723;
    border-radius:5px; /* Coins arrondis */
    text-align : center; /* on centre le texte qui se trouve dans la liste */ 
}
#menu ul {
    list-style : none;    
    margin:0 -40px;
    width: 952px;
}
#menu /* Ensemble du menu */
{
    font-weight : bold; /* on met le texte en gras */
    font-family : Trebuchet MS, sans-serif;
    font-size : 14px; /* hauteur du texte : 12 pixels */
}

#menu li 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 : #250050; /* couleur du texte */
    text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    width : 135px; /* largeur */
    height: 37px;
    background:-moz-linear-gradient(90deg, #FACB2B, #F89E1B, #FFF1E0) no-repeat;
}

#menu li a:hover /* Lorsque la souris passe sur un des liens */    
{
    color: #250050;
    background: -moz-linear-gradient(90deg, #F68E1E, #FACB2B) no-repeat;
}

#menu .menu_accueil a {
    height: 37px;    
    background:-moz-linear-gradient(90deg, #FACB2B, #F89E1B, #FFF1E0) no-repeat;
    border-radius:5px 0 0 5px; /* Coins arrondis */
    padding-bottom: 3px 1px 4px;
}

#menu .menu_contact a {
    height: 37px;    
    background:-moz-linear-gradient(90deg, #FACB2B, #F89E1B, #FFF1E0) no-repeat;
    border-radius:0 5px 5px 0; /* Coins arrondis */
}

#menu .menu_accueil a:hover
{
    height: 37px;
    color: #250050;
    background: -moz-linear-gradient(90deg, #F68E1E, #FACB2B) no-repeat;
    border-radius:5px 0 0 5px; /* Coins arrondis */
}

#menu .menu_contact a:hover
{
    height: 37px;
    color: #250050;
    background: -moz-linear-gradient(90deg, #F68E1E, #FACB2B) no-repeat;
    border-radius:0 5px 5px 0; /* Coins arrondis */
}

#menu li ul a /* Liens du sous-menu normal */
{
    color: #250050;
    font-weight: normal;
    text-align: left;
    line-height: 14px;
    background: #F7931E;
    width: 220px;
    height: 16px;
    margin-left: 5px;
}

#menu li ul a:hover /* Lorsque la souris passe sur un des liens du sous-menu */    
{
    color: #250050;
    font-weight: normal;   
    line-height: 14px;
    text-align: left;
    background: #F7931E;
    text-decoration: underline;
    width: 220px;
    height: 16px;
    margin-left: 5px;
}

#menu li /* Elements des listes */      
{ 
    float : left;
    background: #F7931E;
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
    border-right: 1px solid #F7931E;
}

html>body #menu li:last-child
{
    border-right: none;
}

#menu li ul /* Sous-listes */
{ 
    position: absolute; /* Position absolue */
    width:675px; /* Largeur des sous-listes */
    background: #F7931E;
    margin-left: 0;
    height: 180px;
    left: -999em; /* Hop, on envoie loin du champ de vision */
    color: #250050;
    border-radius:0 0 5px 5px; /* Coins arrondis */
}

#menu ul li h2{ /* Titre sections sous menu */   
    line-height: 20px;
    display:block;
    margin:2px 0 0;
    font:bold 12pt Trebuchet MS, sans-serif;
    color:#fff;
    } 

#menu li ul li /* Éléments de sous-listes */
{
    display:block;
    list-style:inside none;
    padding:0;
    margin:0;
    position:relative;
}

#menu li:hover ul, #menu li li:hover 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 */
}

#menu_gauche {
  position: absolute;
  left: 2.63%;
  width: 220px;
  top: 8px;
}
#menu_centre {
  position: absolute;
  vertical-align: top;
  left: 35.43%;
  width: 220px;
  top: 8px;
}
#menu_droite {
  position: absolute;
  vertical-align: top;
  right: 2.63%;
  width: 220px;
  top: 8px;
}

Alors, si j'y suis "presque" arrivé il reste quand même quelques problèmes
Ainsi, en 1 (sur mon image), j'aimerai quand même centrer verticalement. J'ai essayé le vertical-align ou vertical-position... mais rien, il ne se passe rien. J'ai essayé d'autres trucs, mais ça me descend tout (libellé des boutons ET boutons eux-même). Bon ça encore, ça n'est pas trop grave, je m'en accommoderai.
Par contre, en 2 (sur mon image) (c'est la raison pour laquelle j'ai mis un sous menu à mon 3e bouton), j'ai un "big-souci"; mon sous-menu dépasse à droite quand je passe la souris sur le 3e bouton (et je vous dis pas ce que ça va être si je clique sur le 4e, le 5e...).
J'ai essayé d'attribuer une classe au 1er <UL> (dans mon code HTML) puis faire :

#menu li ul.nom_class_ul1 /* Sous-listes */
{ 
    position: absolute; /* Position absolue */
    width:675px; /* Largeur des sous-listes */
    /*background: red;*/
    background: #F7931E;
    margin-left: 0;
    height: 180px;
    left: -999em; /* Hop, on envoie loin du champ de vision */
    color: #250050;
    border-radius:0 0 5px 5px; /* Coins arrondis */
}
#menu li ul.nom_class_ul2 /* Sous-listes */
{ 
    position: absolute; /* Position absolue */
    width:675px; /* Largeur des sous-listes */
    /*background: red;*/
    background: #F7931E;
    [b][#red]margin-left: -36px;[/#][/b]/* Pour corriger le décalage à droite */
    height: 180px;
    left: -999em; /* Hop, on envoie loin du champ de vision */
    color: #250050;
    border-radius:0 0 5px 5px; /* Coins arrondis */
}

... mais je me retrouve avec un menu... "cubiste", les boutons dans tous les sens, les sous-menus affichés qui se chevauchent... bref, rien qui ressemble à un menu.
Est-ce que quelqu'un aurait une idée pour m'aider à régler ce problème SVP ?
D'avance merci

Sinon, Olivier, j'ai appliqué votre "astuce" du "last-child border-right : none;" et ça fonctionne très bien, merci.
Par contre, je ne connais pas les "sélecteurs de proximité" et je ne vois pas trop comment les utiliser dans mon code HTML et CSS. Auriez-vous SVP un exemple concret ?
Merci.

Bonne journée à tous et à toutes.

spip93 a écrit :
Par contre, je ne connais pas les &quot;sélecteurs de proximité&quot; et je ne vois pas trop comment les utiliser dans mon code HTML et CSS. Auriez-vous SVP un exemple concret ?

Heu... oui : je vous ai donné un lien plus haut, la section principale de mon sommaire en trois colonnes est architecturée avec cette règle css (car les margin et les width des colonnes ne sont pas les mêmes afin qu'ils correspondent à ma grille.
Modifié par Olivier C (04 Nov 2012 - 23:20)