menu haut horizntale

Chedi · 12/05/2011, 16h40

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
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
 
 
.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;
	}

ornitho13 · 13/05/2011, 21h12

Salut,

en fait il te maquait l'essentiel. C'est à dire faire apparaitre ton sous menu
voici un code CSS qui fonctionne avec ton menu (à améliorer pour adapter à ton design, je n'ai fait que le strict minimum)

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
.menu{
	margin:0 auto; 
	padding:0; 
	height:30px; 
	width:100%; 
	display:block; 
	background:#000 url("../images/menu.png") repeat-x;
	}
 
.menu li{
	padding:0; 
	margin:0; 
	list-style:none; 
	float:left;
	background:#000;
	position:relative;
}
.menu li a{
	padding-left:15px; 
	display:block; 
	color:rgb(255,255,255); 
	text-decoration:none; 
	font:12px Verdana, Arial, Helvetica, sans-serif; 
	cursor:pointer; 
	background:#000 url("../images/menu.png") 0px -30px no-repeat; 
	outline:none;
}
.menu li a span{
	line-height:30px; 
	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;
}
.menu li ul{
	display:none;
}
.menu li:hover ul{
	display:block;
}
.menu li ul{
	position:absolute;
}
.menu li ul li{
	background:#000;
	float:none;
}

Bon courage

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email