Forum : Propriété :active en CSS

Bonjour à tous, petit soucis avec la propriété :active
J'ai créer un menu avec un bouton, l'objectif étant losque je clic sur ce bouton
mon menu s'ouvre et reste ouvert en revanche avec :active je clic il s'ouvre puis se referme aussitôt,
je doit rester appuyer pour avoir le menu en permanence.
Un petit coup de pouce ne serait pas de refus merci d'avance.

Partie Html

<!Doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8 "/>
    <LINK HREF="style.css" REL="stylesheet" type="text/css"/>
    <title>Mon site </title>
  </head>
    <body>
      <header>
        <ul id="menu">
          <li>
            <a href="#"><img src="btn.jpg" width="200" height="140"></a>
              <ul>
                <li>
                  <a href="#">Tutoriels</a>
                    <ul>
                      <li>
                        <a href="#">Windows 8</a>
                      </li>
                      <li>
                        <a href="#">Windows XP</a>
                      </li>
                    </ul>
                </li>
                <li>
                  <a href="#">Video</a>
                    <ul>
                      <li>
                        <a href="#">Se Connecter</a>
                      </li>
                      <li>
                        <a href="#">Mon Compte</a>
                      </li>
                    </ul>
                </li>
                 <li>
                  <a href="#">images</a>
                    <ul>
                      <li>
                        <a href="#">Se Connecter</a>
                      </li>
                      <li>
                        <a href="#">Mon Compte</a>
                      </li>
                    </ul>
                </li>
                  <li>
                   <a href="#">Connexion</a>
                    <ul>
                      <li>
                        <a href="#">Se Connecter</a>
                      </li>
                      <li>
                        <a href="#">Mon Compte</a>
                      </li>
                    </ul>
                  </li>
              </ul>
          </li>
        </ul>
      </header>
    </body>
</html>

Partie CSS

#menu, #menu ul
{
padding: 0;
margin: 0;
list-style: none;
line-height: 21px;
text-align: :center;
}
#menu img{
    border-radius: 50% 50% 50% 50%;
    border: 2px solid black;
}
#menu
{
    position: absolute;

font-weight: bold;
font-family: arial;
font-size: 12px;

}
#menu a{
margin-top: 3px;
    text-align: center;
    border-radius: 5px;
    display:block;
    padding: 0;
    background: #000;
    color: #fff;
    text-decoration: none;
    width: 144px;
}
#menu li{
    float: left;
    border-right: 1px solid #fff;
}
html>body #menu li{
    border-right: 1px solid transparent;
}
#menu li ul{
    position: absolute;
    width: 144px;
    left: -999em;
}
#menu li ul li{
    border-top: 1px solid #fff;
}
html>body #menu li ul li{
    border-top: 1px solid transparent;
}
#menu li ul ul{
    margin: -22px 0 0 144px;
    border-left: 1px solid #fff;
}
html>body #menu li ul ul{
    border-left: 1px solid transparent;
}
#menu a:focus{
    color: #000;
    background: #bbb;
}
#menu li:active ul ul, #menu li.sfhover ul ul {
    left: -999em;
}
#menu li:active ul, #menu li li:active ul,#menu li.sfhover ul, #menu li li.sfhover ul{
    left: auto;
    min-height: 0;
}
 p{
    float: left;
    padding: 0px;
 }

Propriété :active en CSS

4 réponses