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:
Ver original <li class="nivel1"><a href="#" class="nivel1">Opción principal 1
</a> <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> <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> <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>
el estilo:
Código CSS:
Ver original#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