Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > CSS
CSS Forum d'entraide sur l'utilisation des feuilles de style CSS. Avant de poster : Cours CSS, FAQ CSS, Galerie CSS
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 12/05/2011, 16h40   #1
Candidat au titre de Membre du Club
 
Inscription : décembre 2010
Messages : 51
Détails du profil
Informations forums :
Inscription : décembre 2010
Messages : 51
Points : 13
Points : 13
Envoyer un message via Skype™ à Chedi
Par défaut menu haut horizntale

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 :
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 :
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;
	}
Chedi est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 13/05/2011, 21h12   #2
Rédacteur/Modérateur
 
Homme Jérome Debray
Responsable de projet
Inscription : mai 2009
Messages : 627
Détails du profil
Informations personnelles :
Nom : Homme Jérome Debray
Âge : 32
Localisation : France

Informations professionnelles :
Activité : Responsable de projet
Secteur : High Tech - Multimédia et Internet

Informations forums :
Inscription : mai 2009
Messages : 627
Points : 3 064
Points : 3 064
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 :
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
ornitho13 est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 11h41.


 
 
 
 
Partenaires

Hébergement Web