Afficher le sous menu avec clique sur CSS

[Fermé]
Signaler
Messages postés
43
Date d'inscription
vendredi 13 février 2009
Statut
Membre
Dernière intervention
18 juin 2011
-
Bonjour,

Je voulais mettre en place un menu dans mon site et je veux que le sous menu s'afficher une fois cliquer sur le menu principale sans passe javascript mais plutôt en css.
J'arrive que le sous menu s'afficher une fois clique mais si on enlève le souris n'apparait pas.
S'il y a quelqu'un qui peut me débloquer, je suis prête à l'écouter.
Voici mon menu html ainsi que mon css:
<ul id="menu" >
<li>
<a href="#">ACCUEIL</a>
</li>
<li>
<a href="#" >Salut</a>
<ul>
<li><a href="#">Présentation</a></li>
<li><a href="#">Tarif</a></li>
</ul>
</li>
<li>
<a href="#">Bonjour</a>
<ul>
<li><a href="#">Présentation</a></li>
<li><a href="#">Tarif</a></li>
</ul>
</li>

</ul>
</div>
/*********CSS***************/
#menu{
width: 900px;
height: 27px;
background: #000000 url(../images/bg-bubplastic.gif) top left repeat-x;
color: #FFFFFF;
}
ul#menu li a {
display: block;
padding-right:19px;
text-transform: uppercase;
font-family: 'Trebuchet MS';
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
padding-left: 27px;
height:auto;
padding-bottom:5px;
}
ul#menu {
display: block;
position: absolute;
padding:0;
margin:0;
height:27px;
}
ul#menu li {
display: block;
float: left;
padding-top:5px;
width: auto;
height:27px;
background: transparent url(../images/bg-bubplastic-h-purple.gif) top left no-repeat;
}
ul#menu li a:hover,
ul#menu li a:focus:hover {
background: transparent url(../images/bg-bubplastic-h-aqua.gif) top left no-repeat;
}
ul#menu li a:active,
ul#menu li a:focus {
background: transparent url(../images/bg-bubplastic-h-aqua.gif) top left no-repeat;
}
/*
ul#menu li a:hover {
background: transparent url(../images/bg-bubplastic-h-aqua.gif) top left no-repeat;
}*/
ul#menu li ul {
display: none;
}
ul#menu li:active ul,
ul#menu li:focus ul{
display: block;
position: absolute;
left:0px;
padding:0;
margin:0;
outlines:0;
padding:0px;
height:auto;
/*background: transparent url(../images/bg-bubplastic-h-aqua.gif) top left repeat;*/
background: url(../images/gray.jpg) top left repeat-x;
width:900px;
height:27px;
}

ul#menu li ul li {
display: inherit;
float: left;
padding-top:0px;
/*margin-left:10px;*/
width: auto;
height:auto;
background:none;
text-align:left;
}
ul#menu li ul li a {
display: block;
position: static;
padding:4px;
color:#FFFFFF;
font-size:70%;
text-decoration:none;

}
ul#menu li ul li a:hover {
color:#FFFFFF;
}
/**********************************/