menú desplegable hacia abajo, tercer nivel

[cucuru]

hola! estoy realizando un menú vertical que se despliega hacia abajo, el problema es que no se como llamar en css al tercer nivel para darle los estilos que quiero, esto es lo uqe tengo:

Código HTML:

<div class="menu" ><ul class="menu">
   <li>opcion 1
      <ul>
         <li>opcion 1.1</li>
         <li>opcion 1.2</li>
      </ul>
   </li>
   <li>opcion 2
      <ul>
         <li>opcion 2.1
            <ul>
               <li>opcion 2.1.1</li>
               <li> opcion 2.1.2</li>
            </ul>
         </li>
         <li>ppcion 2.2</li>
      </ul>
   </li>
</ul>
</div> 

Y el css:

Código:

#menu {
	float:left;
	margin-top:25px;
	width: 240px;
	}

#menu li {
	list-style:none;
}

#menu li a {
  	height: 24px;
	text-decoration: none;
	}

#menu li a:link, #menu li a:visited {
	color: #9E3C02;
	display: block;
	background: url(menu/menu.gif);
	padding: 8px 0 0 30px;
	}

#menu li a:hover{
	color: #fff;
	background: url(menu/menu.gif) 0 -32px;
        padding: 8px 0 0 30px;
	}

#menu li a:active, #menu li.activo a{
	color: #fff;
	background: url(menu/menu.gif) 0 -64px;
	padding: 8px 0 0 30px;
	}

#menu ul ul { 	
	display:none;
	color: #9E3C02;
	background: url(menu/menu.gif) 0 -32px;	
	padding: 8px 0 0 30px;
}

#menu ul ul:hover { 
	display:none;
	list-style:none;
	color: #fff;
	background: url(menu/menu.gif) 0 -32;	
	padding: 8px 0 0 30px;
}

#menu ul li:hover > ul, #menu ul li.activo > ul {
	display:block;
}

Lo que quiero es saber como llamar en css a las opciones 2.1.1 y 2.1.2

Gracias!! Saludos!

[Impostor]

Mira este ejemplo de Mikmoro, creo te será de ayuda.

Saludos¡¡

[cucuru]

Hola! pues si que me ha sido de ayuda! gracias, pero sigo teniendo otro problema que no consigo resolver con ese ejemplo, el problema es que yo quiero una decoración diferente para los niveles 2 y 3, pero toma la del primer nivel. Pongo el código que creo que falla:

Código HTML:

/* Creo que el error es esto */
#menu li a:link, #menu li a:visited { /* Estilo del menú de primer nivel */
	color: #9E3C02;
	display: block;
	background: url(menu/menu.gif);
	padding: 8px 0 0 30px;
}

/* Y esto lo que no se ve */
#menu li ul.segundoNivel{ /* Estilo del menú de segundo nivel */	
	color: #9E3C02;	
	display:none;	
	background: url(menu/menu.gif) 0 -32px;
	padding: 0 0 0 0;
}

#menu ul ul.tercerNivel{ /*Estilo del menú del tercer nivel */
	background: url(menu/menu.gif) 0 -64px;
	font : 60% sans-serif;
	text-align:left;
	color: fff;
	padding: 0 0 0 0;
}

Muchas gracias!