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