Menu horizontal (qui dépasse à droite)

**spip93** · 11/11/2012, 15h41

Bonjour à tous et à toutes,

Tout d'abord, je tiens à préciser que je suis un infographiste à la base, et je suis un grand débutant en matière de codage CSS. J'ai quelques notions, mais quasiment pas de pratique. Par conséquent, SVP, soyez indulgents.

J'essaye depuis quelques jours de faire un menu horizontal déroulant. Grâce à un tutoriel que j'ai mis à ma sauce, j'ai réussi à faire celui-ci (voir ci-dessous).

Voici le code HTML puis le code CSS qui m'ont permis d'y parvenir (avec certains de mes commentaires et d'autres du tutoriel dont je me suis servi)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
<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>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
 
#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;
}

Cependant, j'ai encore quelques problèmes :
- En 1 (quand j'ai un intitulé sur 1 ligne comme Accueil ou Contact), je n'arrive pas à 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 (dans mon code CSS) au second sous menu, mais c'est parti en vrille et j'ai eu mes boutons partout, mes sous menus qui se chevauchaient...

Quelqu'un aurait-il SVP une idée pour m'aider à résoudre ces problèmes (surtout le second) ?
D'avance merci pour vos réponses

.

Bonne journée.

**spip93** · 11/11/2012, 17h25

Ça y est, j'ai résolu mon problème.
En fait, il fallait que j'attribue une classe (comme j'avais fait) mais à TOUTES mes UL, or je ne l'avais fait que sur 2 UL, d'où mes chevauchements de boutons

Menu horizontal (qui dépasse à droite) [CSS 3]

CSS

Vue hybride

Discussions similaires

Partager

Partager