Discussion :

[Jeremy60500]

Bonjour,

Je souhaiterais réaliser des sous menus mais je rencontre quelques difficultés...
Pouvez-vous m'aider à réaliser, à partir de mon menu (ci-dessous), des sous menus apparaissant lorsque la souris se positionne sur l'élément père ?

Code HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="menu">
 
      <ul>
          <li><a href="accueil.php"><img src="images/petit1.fw.png" id="logo"></a></li>
        <li><a href="inventaire.php">Inventaire</a></li>
        <li><a href="assistance.php">Assistance</a></li>
        <li><a href="technicien.php">Technicien</a></li>
        <li><a href="contact.php">Administration</a></li>
        <li><a href="contact.php">Contact</a></li>
        <li><input type="search" id="search" placeholder="Rechercher" size="20"> </li>
  </ul>
</div>

Code 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
#menu {
    width: 1000px;
    margin:0px
}
 
#menu ul {
    float: left;
    list-style-type: none;
    width: 960px;
    height: 38px;
    background: #e3e3e3;
    background: -moz-linear-gradient(top, #ccc, #999);
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
    -moz-box-shadow: 1px 1px 3px #333;
    -webkit-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 2px #333;
    margin:0px;
}
 
#menu ul a{
    display: block;
    padding: 10px 20px 10px 20px;
    list-style-type: none;
    float: left;
    color: #454545;
    font-size:15px;
    text-decoration: none;
}
 
#menu ul a:hover{
    display: block;
    padding: 10px 20px 10px 20px;
    list-style-type: none;
    float: left;
    color: #ddd;
 
    text-shadow: 0 1px 0 black;
 
    background: #555;
    background: -moz-linear-gradient(top, #444, #555);
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#555));
}

Ainsi, à partir du code HTML suivant, faire apparaître les sous menu "Test 1" et "Test 2", au passage de la souris sur l'élément "Inventaire".

Code html :

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
<div id="menu">
 
      <ul>
          <li><a href="accueil.php"><img src="images/arcelorpetit1.fw.png" id="logoarcelormenu"></a></li>
        <li><a href="inventaire.php">Inventaire</a></li>
            <ul>
        <li><a href="">Test1</a></li>
        <li><a href="">Test2</a></li>
           </ul>
        <li><a href="assistance.php">Assistance</a></li>
        <li><a href="technicien.php">Technicien</a></li>
        <li><a href="contact.php">Administration</a></li>
        <li><a href="contact.php">Contact</a></li>
        <li><input type="search" id="search" placeholder="Rechercher" size="20"> </li>
  </ul>
</div>

Merci de votre coup de pouce

[Torgar]

Salut,

L'imbrication n'est pas bonne pour ton sous-menu :

Code html :

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

1
2
3
4
5
6
<li><a href="inventaire.php">Inventaire</a>
	<ul>
        <li><a href="">Test1</a></li>
        <li><a href="">Test2</a></li>
	</ul>
</li>

Je te conseillerai de faire un petit tour sur cette page, histoire d'avoir un exemple.

[saymoneu]

Et il faut aussi effectuer un traitement sur la liste de niveau 2 (après avoir correctement imbriqué comme l'a dit Torgar):

Code css :

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

1
2
3
4
5
6
#menu ul ul{
        display:none;
}
#menu ul li:hover ul{
	display:block;
}

[Jeremy60500]

Merci de vos conseils

C'est un peu mieux mais pas encore tout à fait ça. Je souhaiterais que les sous menus se mettent en dessous de l'élément, là dans mon cas il le remplace

Code HTML :

Code html :

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
<div id="menu">
 
      <ul>
      	<li><a href="accueil.php"><img src="images/arcelorpetit1.fw.png" id="logoarcelormenu"></a></li>
                <li>
                <a href="inventaire.php">Inventaire</a>
        	<ul>
        		<li><a href="">Test 1</a></li>
        		<li><a href="">Test 2</a></li>
            </ul>
            	</li>
        <li><a href="assistance.php">Assistance</a></li>
        <li><a href="technicien.php">Technicien</a></li>
        <li><a href="contact.php">Administration</a></li>
        <li><a href="contact.php">Contact</a></li>
        <li><input type="search" id="search" placeholder="Rechercher" size="20"> </li>
  </ul>
</div>

Code CSS :

Code css :

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
#menu {
	width: 1000px;
	margin:0px
}
 
#menu ul {
	list-style-type: none;
	width: 1000px;
	height: 38px;
	background: #e3e3e3;
	background: -moz-linear-gradient(top, #ccc, #999);
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
	-moz-box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 1px 1px 3px #333;
	box-shadow: 1px 1px 2px #333;
	margin:0px;
	overflow:hidden;
	position:absolute; 	
	margin:0; padding:0;   
}
 
#menu ul a{
	padding: 10px 20px 10px 20px;
	list-style-type: none;
	float:left;
	color: #454545;
	font-size:15px;
	text-decoration: none;
}
 
#menu ul a:hover{
	display: block;
	padding: 10px 20px 10px 20px;
	list-style-type: none;
	color: #ddd;
	text-shadow: 0 1px 0 black;
	background: #555;
	background: -moz-linear-gradient(top, #444, #555);
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#555));
}
 
#menu ul ul{
	display:none;
}
 
#menu ul li:hover ul{
	display:block;
}

Merci

[saymoneu]

Ok, enlevez l'overflow:hidden dans "#menu ul" et complétez le "#menu ul ul" :

Code css :

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

1
2
3
4
#menu ul ul{
display:none;
top:37px;
}

[Jeremy60500]

Génial

Dernière précision (je sais je suis chiant ), comment faire pour aligner les sous menus l'un en dessous de l'autre, et qu'ils soient de la même taille que l'élément principale ?

En tout cas, merci beaucoup