Menú desplegable de tres niveles

[Alun]

Hola, foro:

Tengo un menú con el que se acceden a distintos apartados de la página. He decidido mejorarlo pudiendo acceder a apartados más concretos. Para ello, estoy haciendo que el menú en cuestión se convierta en un desplegable de tres niveles. El problema: no he conseguido ocultar el tercer nivel de ninguna manera. El código:

Código HTML:

<div class="menu_hor" id="menu_horiz">
 <ul id="menu_horizontal">  
  <li id="inicio"><a href="index.php" title="Texto"><img src="img/buttons/inicio.png" id="imginicio" onMouseOver="chbut('imginicio', 'inicio2');" onMouseOut="chbut('imginicio', 'inicio');"></a></li>  
  <li id="pelis"><a href="buscar.php?tipo=peliculas" title="Peliculas"><img src="img/buttons/pelis.png" id="imgpelis" onMouseOver="chbut('imgpelis', 'pelis2');" onMouseOut="chbut('imgpelis', 'pelis');"></a>
   <ul>
    <li id="generos">
     Géneros
     <ul class="subgeneros">
      <li class="subgeneros"><a href="#">Drama</a></li>
      <li class="subgeneros"><a href="#">Acción</a></li>
     </ul>
    </li>
    <li><a href="#">SubLink 5.2</a></li>
   </ul>
  </li>
  <li id="libros"><a href="buscar.php?tipo=libros" title="Libros"><img src="img/buttons/libros.png" id="imglibros" onMouseOver="chbut('imglibros', 'libros2');" onMouseOut="chbut('imglibros', 'libros');"></a>
  </li>  
  <li id="musica"><a href="buscar.php?tipo=discos" title="Música"><img src="img/buttons/musica.png" id="imgmusica" onMouseOver="chbut('imgmusica', 'musica2');" onMouseOut="chbut('imgmusica', 'musica');"></a>
  </li>
  <li id="juegos"><a href="buscar.php?tipo=juegos" title="Juegos"><img src="img/buttons/juegos.png" id="imgjuegos" onMouseOver="chbut('imgjuegos', 'juegos2');" onMouseOut="chbut('imgjuegos', 'juegos');"></a>
  </li>
 </ul>
</div>
 

Y la hoja, solamente lo que he puesto para el tercer nivel, el segundo lo muestro y oculto bien:

Código CSS:

.subgeneros{
display:none;}
 

Con esto, la tercera lista debería ocultarse, ¿no?
¿Qué tengo que poner para ocultarla?

Gracias