How do you make a popup overflow a scrolling div?

I have a scrolling DIV, which contains a list of many items: ``` ___________ | |^| | Item1 | | |_________| | | | | | Item2 | | |_________| | | | | | Item3 | | |_________|v| ``` When the user rolls over a list item, a popup appears describing that item: ``` ___________ | |^| | Item1 | | |_________| | | _|_|____________________ | Item2 | Description for item 2 | |________------------------------ | | | | Item3 | | |_________|v| ``` The dilemma is the scrolling div must have overflow:auto, but the popup wants to be visible outside of the div. So currently, my popup gets chopped off: ``` ___________ | |^| | Item1 | | |_________| | | _|_| | Item2 | De| |________---| | | | | Item3 | | |_________|v| ``` HTML ``` <div id="box"> <ul> <li> <h2>Item 1</h2> <span>Description for item 1</span> </li> <li> <h2>Item 2</h2> <span>Description for item 2</span> </li> <!-- ... and many other items ---> </ul> </div> ``` CSS ``` #box { width: 10em; height: 20em; overflow: auto; } #box ul { line-height: 2em; } #box ul li { position: relative; } #box ul li span { display: none; position: absolute; right: -1em; top: 1em; height: 1em; } #box ul li:hover span { display: block; } ```