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