Three level menu CSS - css

Question

I want to create a three level menu with CSS but i dont know how to do this:
i have this HTML code with 3 levels :
<div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu">
<li class="first leaf active menu-mlid-1264">Accueil</li>
<li class="expanded menu-mlid-1604">Diagnostic RH
<ul class="menu">
<li class="first expanded menu-mlid-1281">Gestion Administrative
<ul class="menu">
<li class="first leaf menu-mlid-958">Remplir le questionnaire</li>
<li class="last expanded menu-mlid-1282">Gérer les rapports
<ul class="menu" style="margin-left: 244px;">
<li class="first last leaf menu-mlid-1287">Saisie des coefficients</li>
</ul>
</li>
</ul>
</li>
<li class="expanded menu-mlid-1283">Gestion de la paie<ul class="menu"><li class="first leaf menu-mlid-1285">Remplir le questionnaire</li>
<li class="last leaf menu-mlid-1291">Gérer les rapports</li>
</ul>
</li>
<li class="last expanded menu-mlid-1284">Gestion de la rémunération
<ul class="menu"><li class="first leaf menu-mlid-1286">Remplir le questionnaire</li>
<li class="last expanded menu-mlid-1290">Gérer les rapports
<ul class="menu">
<li class="first last leaf menu-mlid-1385">Réponses du panel</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="leaf menu-mlid-1265">Benchmark</li>
<li class="leaf menu-mlid-1266">Data-RH</li>
<li class="last leaf menu-mlid-1267">Outils et Méthodes</li>
</ul>
</div>
The result when i hover the first element all others are open like image :
In style.css i have this code :
nav {
position: fixed; left: 0; width: 100%; height: 60px; background: url(../rgba.php?r=0&g=0&b=0&a=35) repeat; background: rgba(0,0,0,0.35); z-index: 999;
}
nav * {
z-index: 999;
}
nav .wrapper {
padding: 13px 0 0 0;
}
nav .menu {
float: right; margin-top: -1px;
}
nav li {
float: left;
}
nav li a {
padding: 7px 10px 6px; display: block; background: url(../rgba.php?r=0&g=0&b=0&a=30) repeat; background: rgba(0,0,0,0.3); margin-left: 6px; font-size: 12px;
}
nav li a.active, nav li a:hover {
background: url(../rgba.php?r=0&g=0&b=0&a=40) repeat; background: rgba(0,0,0,0.4); color: #fff;
}
#nav-toggle {
float: right; font-size: 24px; padding-top: 4px;
}
nav ul ul {
display: none; padding-top: 11px;
}
nav li ul li {
display: block; float: none;
}
nav li:hover ul {
display:block;
}
nav li ul li:hover ul{
display:none;
}
nav ul ul {
list-style: none;
}
nav li ul {
position: absolute;
}
nav li:hover ul li ul{
margin-left: 222px;
width: 250px;
}
nav li ul li:hover ul{
margin-left: 222px;
width: 250px;
}
Please help me how to solve it!