Afficher le sous menu avec clique sur CSS

Fermé
samof02 Messages postés 43 Date d'inscription vendredi 13 février 2009 Statut Membre Dernière intervention 18 juin 2011 - 17 févr. 2010 à 09:38
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;
}
/**********************************/