Horizontal scroll in multi layer drop down meny (css) -

i have multi drop down menu several layers in css, , vertical scroll longer parts. problem when hover part in submenu leads submenu, new submenu confined within "box" created first submenu (and overflow) , have scroll horizontally see new submenu, instead of appearing next old submenu. how create new "box" outside first 1 instead of inside it, never have scroll horizontally when have several submenus , subsubmenus?

this simplified version of code (the part controls appearance of submenus):

#navbar li ul {    display: none;   max-height:800px;   overflow-y:auto;   min-width: 160px;   max-width:auto;   } 

and code controls display of more submenus when hovering element:

#navbar li:hover ul, #navbar li.hover ul {   display: block;  position: absolute;  margin: 0;  padding: 0;  z-index: 20000;  -o-transition: 1.7s ease-out 1s;  -webkit-transition: 1.7s ease-out 1s;  -moz-transition: 1.7s ease-out 1s; }