Faire un menu à 3 niveaux

Bonjour,

J'ai récupéré un code pour un menu à 2 niveaux. Je voudrais le compléter pour en faire un menu à 3 niveaux.
J'ai réussi à placer correctement les différents menus mais je bloque sur la partie du niveau 3.
Quand je survole "Les rencontres" le niveau 2 s'affiche ainsi que le dernier menu du niveau 3 alors que rien ne devrait être affiché tant que je ne survole pas l'un des menus du niveau 2
J'espère que mes explications sont claires !!
le fichier menu

 <div id="menu">
         <ul class="niveau1">
      <li><a href=""> Accueil</a></li>
      <li><a href=""> Historique</a></li>
             <li><a href=""> Les Rencontres</a>
    <ul class="niveau2">
                   <li class="plus"><a href= "">1988 - 1998 </a>
                        <ul class="niveau3">
                            <li><a href= " ">1988 </a></li>
                            <li><a href= " ">1989 </a></li>
                            <li><a href= " ">1990 </a></li>
                        </ul>
                     </li>
                     <li class="plus"><a href= ""> 1999 - 2009 </a>
                        <ul class="niveau3">
                            <li><a href= " ">1999 </a></li>
                            <li><a href= " ">2000 </a></li>
                            <li><a href= " ">2001 </a></li>
                        </ul>
                     </li>
                     <li class="plus"><a href= "">2010 - 2018 </a>
                        <ul class="niveau3">
                             <li><a href= " ">2010 </a></li>
                             <li><a href= " ">2011 </a></li>
                             <li><a href= " ">2012 </a></li>
                        </ul>
                     </li>
                  </ul>
   </li>
      <li><a href="index.php?page=charte">Charte</a></li>
      <li><a href="#">contact</a></li>
         </ul>
 </div>

le fichier css

/*  LE MENU   */
#menu ul { margin:0; padding:0; list-style-type:none; text-align:center; font-size:.8em; }
#menu ul.niveau2 {width: 10.8em; font-size: 1em; }
#menu ul.niveau3 {left:10.7em; width: 10.8em; font-size: 1em; top: 0em; display:none; }
#menu li { float:left; margin:auto; padding:0; background-color:black; }
#menu li a { display:block; width:10em; color:white; text-decoration:none; padding:5px; }
#menu li a:hover, #menu li.fhover { background-color:#FFF; color:black; } 
#menu ul li ul { display:none; }
#menu ul li:hover ul { display:block; }
#menu li:hover ul li { float:none; }
#menu li ul { position:absolute; }

Si quelqu'un veut bien m'aider !!
Merci d'avance