title: How do you make a popup overflow a scrolling div?
body: <p>I have a scrolling DIV, which contains a list of many items:</p>
  
  <pre><code> ___________
  |         |^|
  | Item1   | |
  |_________| |
  |         | |
  | Item2   | |
  |_________| |
  |         | |
  | Item3   | |
  |_________|v|
  </code></pre>
  
  <p>When the user rolls over a list item, a popup appears describing that item:</p>
  
  <pre><code> ___________
  |         |^|
  | Item1   | |
  |_________| |
  |        _|_|____________________
  | Item2 | Description for item 2 |
  |________------------------------
  |         | |
  | Item3   | |
  |_________|v|
  </code></pre>
  
  <p>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:</p>
  
  <pre><code> ___________
  |         |^|
  | Item1   | |
  |_________| |
  |        _|_|
  | Item2 | De|
  |________---|
  |         | |
  | Item3   | |
  |_________|v|
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="box"&gt;
    &lt;ul&gt;
      &lt;li&gt;
         &lt;h2&gt;Item 1&lt;/h2&gt;
         &lt;span&gt;Description for item 1&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
         &lt;h2&gt;Item 2&lt;/h2&gt;
         &lt;span&gt;Description for item 2&lt;/span&gt;
      &lt;/li&gt;
      &lt;!-- ... and many other items ---&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#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;
  }
  </code></pre>