Make absolutely positioned children not run out of viewport borders

Make absolutely positioned children not run out of viewport borders

Imagine we have a horizontal drop-down menu with a structure like this:
<ul class="root">
<li class="root-item">
<ul class="submenu">
<li></li>
<li></li>
<li></li>
</ul>
</li>
...
<li class="root-item">
<ul class="submenu">
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
the css is roughly like this:
.root-item{
position:relative;
display:inline-block;
}
.submenu{
position:absolute;
top:-1000px;
}
.root-item:hover .submenu{
top:100%;
}
The priblem here is: if some (say, the last) .submenu is wide enough, it
may go out of the .root borders, and eventually out of the viewport (if
the .root's width is 100% of the VP).
What I want is making .submenu-s fit into the .root. But - with pure css.
The desired result is something like Amazon's top right menu. Is that
possible?
Thanks!