Comment formuler une condition en css ?
Bonjour je tente de créer un menu à onglet avec sous menu genre http://fr.news.yahoo.com/marine-pen-...074546900.html
le principe paraît simple si je clique sur l'onglet Chaussure çà doit m'afficher
la première sousmenu1 Homme femme etc ... sinon ils seront cachées :
j'arrive à mettre en ligne les listes mais je bloque un peu sur les conditions
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
63
64
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Menu à onglet</title>
</head>
<body>
<div class="onglet">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#sousmenu1">Chaussure</a></li>
<li><a href="#sousmenu2">Annonce</a></li>
</ul>
</div>
<div class="contenu">
<ul id="sousmenu1">
<li><a href="#">Homme</a></li>
<li><a href="#">Femme</a></li>
<li><a href="#">Enfant</a></li>
</ul>
<ul id="sousmenu2">
<li><a href="#">Voiture</a></li>
<li><a href="#">Avion</a></li>
<li><a href="#">Bateau</a></li>
</ul>
</div>
</body>
</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
|
.onglet{margin:0;padding:0;}
.onglet ul{list-style-type:none;margin:0;padding:0;border:solid;padding-top:6px;padding-bottom:6px;}
.onglet ul li{display:inline;}
.onglet ul li a:link , .onglet ul li a:visited {font-weight:bold;color:#FFFFFF;background-color:#98bf21;text-align:center;padding:6px;text-decoration:none;text-transform:uppercase ;}
.onglet ul li a:hover,.onglet ul li a:active
{
background-color:#7A991A;
}
/* ici condition si le curseur passe sur onglet liste alors afficher le bloc sous menu 1*/
.onglet ul li :hover .contenu ul#sousmenu1 {display:block;}
/* sinon la ?????? ca reste à déterminer */
/* on s'occupe du sous menu */
div.contenu {margin:0;padding:0;}
div.contenu ul#sousmenu1 {margin:0;padding:0;list-style-type:none;padding-top:6px;padding-bottom:6px;}
div.contenu ul#sousmenu1 li {display:inline;margin-left:10px;}
div.contenu ul#sousmenu1 li a {text:decoration:none ;background-color:#98bf21;} |
le problème est sans doute ici :
Code:
1
2
3
4
|
/* ici condition si le curseur passe sur onglet liste alors afficher le bloc sous menu 1*/
.onglet ul li :hover .contenu ul#sousmenu1 {display:block;}
/* sinon la ?????? ca reste à déterminer */ |
et autre question est ce que le sousmenu1 et sousmenu2 doit être séparé par des div différents ??
merci
