Discussion :

[mentat]

Bonjour,

Je suis dans la conception de mon menu horizontal, je me suis basé sur l'article de Rodrigue Hunel(que je remercie au passage).

Seulement je n'arrive pas à mettre mon menu de façon horizontal avec les sous-menu qui se décline dessous lors du passage de la souris.

Mon menu reste vertical et la case de mon tableau s'agrandit lorsque le sous menu apparait.


voici mon code HTML:

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
 
<table style="background-image:url(themes/CY17_Simply/images/menu.png); background-repeat:repeat-x ;margin-left: auto;margin-right: auto;text-align: left;" width="920" height="31" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="10" valign="middle">
		</td>
		<td align="left" valign="middle">
<!-- le menu en dessous du header -->
 
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {
		document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
 
// -->
</script>
 
<div id="bloc">
	<div class="menu">
	<ul id="menu" onMouseOut="javascript:show('menu')">
	<li onMouseOver="javascript:show('smenu1');"><a href="#">Accueil</a>
 	</li>
 	<li onMouseOver="javascript:show('smenu2');"><a href="#">Discipline</a>
  			<ul id="smenu2">
   			<li><a href="#">Vitesse</a></li>
            <li><a href="#">Descente</a></li>
            <li><a href="#">Slalom</a></li>
            <li><a href="#">Rivière</a></li>
            <li><a href="#">FreeStyle</a></li>
            <li><a href="#">Tourisme</a></li>
  			</ul>
 	</li>
 	<li onMouseOver="javascript:show('smenu3');"><a href="#">Location</a>
	</li>
 	<li onMouseOver="javascript:show('smenu4');"><a href="#">Vie du Club</a>
  			<ul id="smenu4">
   			<li><a href="#">Bureau</a></li>
   			<li><a href="#">Locaux & Matériels</a></li>
   			<li><a href="#">Entrainement</a></li>
            <li><a href="#">Nos sorties</a></li>
  			</ul>
 	</li>
    <li onMouseOver="javascript:show('smenu5');"><a href="#">Photo</a>
	</li>
    <li onMouseOver="javascript:show('smenu6');"><a href="#">Nous contacter</a>
	</li>
    <li onMouseOver="javascript:show('smenu7');"><a href="#">Liens</a>
	</li>
	</ul>
	</div>
</div>
<!-- fin du menu -->		
		</td>
		<td width="10" valign="middle">
		</td>
	</tr>
</table>

Et voici le CSS:

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
 
ul#menu
{
  margin    :   0;              /* Marge extérieur nulle */
  padding   :   0;              /* Marge intérieur à 1px sauf pour le bas */ 
  width     :   300px;          /* Largeur de notre liste */
  font-size :   1.2em;          /* Taille de notre police */
  border    :   0;				/* Application d'une bordure */
 
}
 
ul#menu li 
{						  
  list-style-type   :  none;            /* Aucunes puces associées */
  margin-bottom     :  1px;             /* Ajout d'une marge en bas du lien */
}
 
ul#menu li a
{
  width             :   auto !important;   /* Largeur interprétée par tous les navigateurs excepté IE6 et inférieur */						
  width             : 	100%;              /* largeur interprétée par IE6 et inférieur */
  padding           :   4px;               /* Définition des marges intérieures */  
  text-decoration   :   none;              /* Suppression du soulignement */
  color             :   #227CD9;           /* Couleur de la police */
  display           :   block;             /* Définition sous forme de block */
  background-color  :   #ccffff;           /* Définition de la couleur de fond */ 
  border            :   1px solid #ccccff; /* Ajout d'une bordure */	
  border-left-width :   4px;               /* Modification de la bordure gauche */
}
 
ul#menu li a:hover
{
  color             :   #993;            /* Changement de la couleur de la police initiale */
  background-color  :   #f4fbdc;         /* Changement de la couleur de fond initiale */
  border            :   1px solid #993;  /* Ajout d'une bordure */	
  border-left-width :   4px;             /* Modification de la bordure gauche */
}
 
.menu {
font-family:Verdana, Arial, Sans-serif;
color:#000000;  /* Couleur du texte normal dans le menu */
font-size:11px;
background: no-repeat
}

Si quelqu'un peut m'aider en me donnant quelques pistes.

Merci beaucoup

[devyan]

Bonjour,

As-tu essayé les exemples présents dans la Galerie CSS ?