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!