Comment formuler une condition en css ?

**razily** · 26/03/2012, 11h34

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 :

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
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 :

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
 
 
.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 :

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

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

**Emyleen** · 02/04/2012, 15h44

bonjour,

Est-ce que c'est cela que tu recherches?

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
/* ici condition si le curseur passe sur onglet liste alors afficher le bloc sous menu 1 */
.onglet:hover > .sousMenu {
   display: block;
}
 
.onglet ul li  :hover .contenu ul#sousmenu1  {display:block;} 
 
/* si on est pas en survol, le sous menu est caché */
.onglet ul li .contenu ul#sousmenu1 {
   display: none;
}

et pas besoin de div, les li séparent parfaitement tes 2 sous menus.

Comment formuler une condition en css ?

CSS

Discussions similaires

Partager

Partager