Submenus con css

[Niktro]

Hola a tod@s,
Tengo un menú en css y html para una web, funcionaba bien o eso creía.
El problema es que tengo que sacar un submenu de un submenu.
Voy a pegar el código porque se entenderá antes.
Este es el menú de html

Código HTML:

<ul id="menu">
                    <li><a href="./index.html">Inicio</a></li>
                    <li><a href="#">Asociación</a>
                    <ul>
                        <li><a href="./fines.html">Fines</a></li>
                        <li><a href="./historia.html">Historia</a></li>
                        <li><a href="./junta.html">Junta Directiva</a></li>
                        <li><a href="./sede.html">Sede</a></li>
                    </ul></li>
                    <li><a href="./actividades.php">Actividades</a></li>
                    <li><a href="#">Documentos</a>
                    <ul>
                        <li><a href="./fines.html">Consejos básicos</a></li>
                        <ul>
                            <li><a href="./normas.html">Normas y consejos para la recolección de setas</a></li>
                            <li><a href="./intoxicaciones.html">Las intoxicaciones por consumo de setas</a></li>
                        </ul>
                        <li><a href="./fines.html">Documentos Micológicos</a></li>
                        <ul>
                            <li><a href="./herbario.html">Herbario</a></li>
                            <li><a href="./galeria.html">Galeria</a></li>
                        </ul>
                    </ul>
                    </li>
                    <li><a href="#">Enlaces</a>
                    <ul>
                        <li><a href="./asociaciones.html">Asociaciones y foros</a></li>
                        <li><a href="./otras.html">Otras páginas de interés</a></li>
                    </ul></li>
                    <li><a href="./contactar.html">Contactar con Verpa</a></li>
                </ul>
 

Y esta la parte de css

Código CSS:

#menu{
padding-left:25px; 
margin-top:15px;
}
#menu li{
list-style:none;
float:left;
}
#menu li a{
display:block;
width:148px;
height:35px; 
background:#99cccc;
border:1px solid; 
padding:2px;
text-decoration:none;
text-align:center; 
vertical-align:middle;
color:#000;
font-family:arial; 
font-size:15px;
font-weight:bold;
background-image:url(../img/menu/base.png);
}
#menu li a:hover{
background:navy;
border-color:transparent;
color:#ffcc00;
background-image:url(../img/menu/encima2.png);
}
#menu li ul{display:none; position:absolute;}
#menu li ul li {
display:block;
float:none; 
position:relative;
padding:0px;
}
#menu li:hover ul{display:block; padding-left:0px;}
#menu li ul li a{
display:block;
width:144px;
height:25px; 
background:#99cccc;
border:1px solid; 
padding:6px;
text-decoration:none;
text-align:left; 
vertical-align:middle;
color:#000;
font-family:arial; 
font-size:14px;
font-weight:normal;
background-image:url(../img/menu/base4.png);
}
 

El problema es que en la linea

Código CSS:

#menu li:hover ul{display:block; padding-left:0px;}
 

Al hacer el display coge todo, incluido el contenido del siguiente ul, ¿Alguna idea?
(Ya se que falta el codigo de los ul e il hijos, pero es el mismo, era por no enguarrar tanto ^-^)