Problème onglet menu

Bonjour,


Mon problème est le suivant : sur mon site internet, je rencontre une difficulté avec les onglets du menu.
C'est à dire que lorsque je clique sur un onglet je souhaite qu'il reste enfoncé pour une meilleure visibilité. Mais après essayé plusieurs solutions, je n'y arrive pas.

Si quelqu'un pouvait m'aider , je serai enfin soulagé.
Voici le code PHP:

<nav>
 <ul class="menu-design">
  <li><a class="menu-design active" href="index.php">Accueil</a></li>
  <li><a href="charpente_et_traitement.php">Charpente</a></li>
  <li><a href="renovation.php">Rénovation</a></li>
  <li><a href="zinguerie.php">Zinguerie</a></li>
  <li><a href="entretien.php">Entretien</a></li>
  <li><a href="contact.php">contacts</a></li>
 </ul>

</nav>

et le code CSS:

a,header,li,nav,ul
{
border:0 none;
font-size:100%;
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:top;
}

ul
{
list-style:none;

}

/*conteneur */
nav
{
display: inline-block;
margin: 0 auto;
padding:20px 0 10px 0;
}

/*menu*/
.menu-design
{
text-decoration:none;
text-transform:uppercase;
font:bold 15px/1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.menu-design li :active
{
border-style: inset;
color:#000;
background:#ff6600;
}

.menu-design ul
{
position:absolute;
top:-999em;
min-width:100%;
background:#333;
padding:19px 0;
left:0;
}

.menu-design li
{
float:left;
position:relative;
border-left:1px solid #151515;
width:135px;
border-right:1px solid #313131;
background:#333;
 }
 


.menu-design a
{
color:#fff;
text-decoration:none;
display:block;
text-align:center;
padding:20px 0 21px;
}


.menu-design li:hover ul
{
top:59px;
z-index:99;
}

.menu-design li:hover li ul
{
top:-999em
}

.menu-design li:hover 
{
background:#ff6600;
}

.menu-design a:hover strong
{
color:#fff;
}

Je vous remercie d'avance
Cordialement