menu haut horizontal

**Chedi** · 12/05/2011, 17h20

bonjour tlm,
j'ai fait ce petit menu horizontale mais j'ai un petit soucis au niveau des sous menu qui ne fonctionne pas si quelqu'un qui une idée au niveau CSS je serais très reconnaissant

la page menu.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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mon mimi</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css" />
</head>
 
<body>
<ul class="menu">
  <li><a href="index.php" class="active" target="_self"><span>Acceuil</span></a></li>
  <li><a href="xx" target="_self"><span>Mes Services</span></a>
 
  <ul class="menu">
                            <li><a href="#">élément 1</a></li>
                            <li><a href="#">élément 2</a></li>
 
                            <li><a href="#">élément 3</a></li>
                        </ul>
 
  </li>
  <li><a href="mycashback.php"><span>Mon Cashback</span></a></li>
  <li><a href="myaccount.php" target="_self"><span>Mon Compte</span></a></li>
  <li><a href="/contact"><span>Contact</span></a></li>
  <li><a href="register.php" target="_self"><span>Inscrivez-Vous</span></a></li>
  <li><a href="faq.php" target="_self"><span>Aide & FAQ</span></a></li>
</ul>
</body>
</html>

la page stylesheet.css

Code :

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

1
2
3
4
5
6
7
8
9
 
.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url("../images/menu.png") repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url("../images/menu.png") 0px -30px no-repeat; outline:none;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url("../images/menu.png") 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url("../images/menu.png") 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url("../images/menu.png") 100% -90px no-repeat;}