Sub-menu extenso

Gente, montei um menu q carrega sub-menus confome passamos o mouse em cima, mas o q está acontecendo é q alguns dos sb-menus são extensos demais, fazendo com q a barra de rolagem ao lado apareça, mas nao é possivel clicar nos itens mais abaixo.

Seria necessário alguma forma q fizesse com q a pagina abaixasse ou q esse sub-menu sobreponha toda a pagina d forma q ele apareça todo , ou entao fazer com q esse sub-menu extenso seja dividido em partes e q eles apareçam do lado dele..

Se alguem tiver alguma dica.. agradeço

<ul id="nav">

<?

$consulta_rp = $conn->Execute("SELECT DISTINCT rp from tabela");

$num_consulta = $consulta_rp->RecordCount();

$controle = 0;

while ($controle < $num_consulta)

{

$rp = $consulta_rp->fields['rp'];

echo "<li><a href='#'>".$rp."</a>";

$consulta_rp->MoveNext();

$controle++;

echo "<ul>";

$consulta_est = $conn->Execute("SELECT estabelecimento from tabela where rp ='$rp'");

$num_consulta2 = $consulta_est->RecordCount();

$controle2 = 0;

while ($controle2 < $num_consulta2)

{

$est = $consulta_est->fields['estabelecimento'];

echo "<li><a href='#'>".$est."</a></li>";

$consulta_est->MoveNext();

$controle2++;

}

echo "</ul>";

echo "</li>";

}

echo "</ul>";

 

?>

// JavaScript Document

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes;

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";

}

node.onmouseout=function() {

this.className=this.className.replace(" over", "");

}

}

}

}

}

window.onload=startList;