三级菜单CSS

Question

我想用CSS创建一个三级菜单，但我不知道如何做到这一点：

我有3个级别的HTML代码：

<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"><a href="#" title="" class="active">Accueil</a></li>
<li class="expanded menu-mlid-1604"><a href="#">Diagnostic RH</a>
<ul class="menu">
<li class="first expanded menu-mlid-1281"><a href="#" title="">Gestion Administrative </a>
<ul class="menu">
<li class="first leaf menu-mlid-958"><a href="#">Remplir le questionnaire</a></li>
<li class="last expanded menu-mlid-1282"><a href="#" title="Gérer les rapports GA">Gérer les rapports</a>
<ul class="menu" style="margin-left: 244px;">
<li class="first last leaf menu-mlid-1287"><a href="#" title="">Saisie des coefficients</a></li>
</ul>
</li>
</ul>
</li>
<li class="expanded menu-mlid-1283"><a href="#" title="">Gestion de la paie</a><ul class="menu"><li class="first leaf menu-mlid-1285"><a href="#">Remplir le questionnaire</a></li>
<li class="last leaf menu-mlid-1291"><a href="#" title="Gérer les rapports GP">Gérer les rapports</a></li>
</ul>
</li>
<li class="last expanded menu-mlid-1284"><a href="#" title="">Gestion de la rémunération </a>
<ul class="menu"><li class="first leaf menu-mlid-1286"><a href="#">Remplir le questionnaire</a></li>
<li class="last expanded menu-mlid-1290"><a href="#" title="Gérer les rapports GR">Gérer les rapports</a>
<ul class="menu">
<li class="first last leaf menu-mlid-1385"><a href="#">Réponses du panel</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="leaf menu-mlid-1265"><a href="#">Benchmark</a></li>
<li class="leaf menu-mlid-1266"><a href="#">Data-RH</a></li>
<li class="last leaf menu-mlid-1267"><a href="#">Outils et Méthodes</a></li>
</ul>
</div>

当我悬停第一个元素时，所有其他元素的结果都像图像一样打开：

在style.css中我有这段代码：

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;
} 

请帮我解决一下！