Pb menu deroulant

**mchbihi** · 02/03/2009, 13h10

Bonjour tt le monde.
voila mon souci:
je veux créer un menu déroulant avec une image de fond sur chaque élément du menu.mais je n'y arrive pas.
voila le code de ma page html ainsi que celui de la page css:

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
<title>Ma page</title>
<link rel="stylesheet" href="css/code.css">
 
</head>
<body>
 
<div id="menu">
   <ul class="niveau1">
      <li><a href="menu 1">menu 1</a></li>
 
      <li class="sousmenu"><a href="menu 2">menu 2</a>
         <ul class="niveau2">
            <li><a href="Sous menu 2.1">Sous menu 2.1</a></li>
            <li><a href="Sous menu 2.2/">Sous menu 2.2</a></li>
         </ul>
      </li>
 
      <li><a href="menu 3">menu 3</a></li>
 
      <li class="sousmenu" image = "test.jpg" ><a href="menu 4">menu 4</a>
         <ul class="niveau2">
            <li class="sousmenu"><a href="Sous menu 4.1">Sous menu 4.1</a>
               <ul class="niveau3">
                  <li><a href="Sous sous menu 4.1.1">Sous sous menu 4.1.1</a></li>
                  <li><a href="Sous sous menu 4.1.2">Sous sous menu 4.1.2</a></li>
                  <li><a href="Sous sous menu 4.1.3">Sous sous menu 4.1.3</a></li>
               </ul>
            </li>
            <li><a href="Sous menu 4.2">Sous menu 4.2</a></li>
         </ul>
      </li>
 
      <li><a href="menu 5">menu 5</a></li>
   </ul>
</div>
 
</body>
</html>

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
div#menu 
	{
		width: 100px;
 
	}
 
div#menu ul 
	{
	padding: 0; 
	width: 100px; 
	border:1px solid; 
	margin:0px;
 
	}
 
div#menu li.sousmenu 
	{
 
		background: #999 ;
	}
 
div#menu ul li {
		position: relative; 
		list-style: none; 
		border-bottom:1px solid; 
		background-image: url(test.jpg);
		}
 
div#menu ul ul {
		position: absolute; 
		top: 0; 
		left: 100px; 
		display:none
		}
 
div#menu li a {
		text-decoration:none;
 
	      }
 
 
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
				display:block;
				}