Poner scroll a div que incluirá menú

[Serenity]

Hola!!, estoy tratando de hacer un menu con css, el menu es de 3 niveles (Opción principal, opción secundaria y algunas con opción terciaria), como las opciones secundarias son muchas, me queda un menú muy largo, por lo que estoy tratando de poner un div y que se muestre un scroll, pero no logro que me quede.

Cómo debo hacerlo, aquí el código del menú:

Código HTML:

<div id="menu">
<ul>  
  <li class="nivel1"><a href="#" class="nivel1">Opción principal 1</a>
    <div id="cajaprueba">
    <ul class="nivel2">
        <li><a href="#">Opción Secundaria 1</a></li>
        <li><a href="#">Opción Secundaria 2</a></li>
        <li class="nivel2"><a class="nivel2" href="#">Opción Secundaria 3 »</a>
            <ul class="nivel3">
                <li><a class="primera" href="#">Opción terciaria 3.1</a></li>
                <li><a href="#">Opción terciaria 3.2</a></li>
                <li><a href="#">Opción terciaria 3.3</a></li>
            </ul>
        <li><a href="#">Opción Secundaria 4</a></li>
        <li><a href="#">Opción Secundaria 5</a></li>
        <li><a href="#">Opción Secundaria 6</a></li>
        <li><a href="#">Opción Secundaria 7</a></li>
        <li><a href="#">Opción Secundaria 8</a></li>
        <li><a href="#">Opción Secundaria 9</a></li>
        <li><a href="#">Opción Secundaria 10</a></li>
        <li><a href="#">Opción Secundaria 11</a></li>
        <li><a href="#">Opción Secundaria 12</a></li>
        <li><a href="#">Opción Secundaria 13</a></li>
    </ul>
    </div>
</li>
</ul>
</div>
 

el estilo:

Código CSS:

#menu ul li.nivel1 { float: left; margin-right: 1px;}
#menu ul li a {display: block;text-decoration: none;color: #fff;background-color: #000000; border: solid 1px #fff; padding: 8px;position: relative;}
#menu ul li a.nivel1, #menu ul li a.nivel2 {display: block!important;display: none;position: relative;}
#menu ul li:hover {position: relative;}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;color: #000;position: relative;}
#menu ul li ul {display: none;}
#menu ul li:hover  ul.nivel2, #menu ul li a:hover  ul.nivel2{display: block;position: absolute;left: 0px;}
#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {display: block;position: absolute;left: 161px!important;left: 160px;top:0px!important;top: -21px;}
#menu ul li ul li a {width: 160px;padding: 8px 0px;border-top-color: transparent;}
#menu ul li ul li a:hover {border-top-color: #000;position: relative;}
#menu ul li ul li ul li a.primera {border-top-color: #fff;}
 
#cajaprueba {height:150px;width:200;overflow-x:hidden;overflow-y:auto; }
 

Desde ya gracias por su atención

[PabloPF]

al menu que te queda largo le pones en css:

Código CSS:

max-height: 50px; /*este es el alto máximo que quieres que tenga el menu*/
overflow:scroll;/*le pones scroll*/
 

[lubtufano]

Creo que se deberian asignar las reglas de estilo de #cajaprueba directamente al elemento <ul> con la clase "nivel2".

[Serenity]

Gracias por su apoyo.

Aplique la respuesta de PabloPF, sólo que ahora no veo el nivel 3 del menu.

Cómo hago para que se muestre??