title: How to force div to spill outside of ul container on hover?
body: <p>How can I let an arbitrary <code>div</code> nested within a <code>ul</code> spill outside of the <code>ul</code>, which is set to <code>width: 160px;</code> and <code>overflow-y: hidden;</code>? I have set it to <code>overflow-y: hidden</code> because the list needs to be scrollable.</p>
  
  <p>Here is my list:</p>
  
  <pre><code>  &lt;ul&gt;
        &lt;li&gt; color name&lt;/li&gt;
        &lt;div class="tooltip"&gt;color name&lt;/div&gt;
        &lt;li&gt; color name&lt;/li&gt;
        &lt;div class="tooltip"&gt;color name&lt;/div&gt;
        &lt;li&gt; color name&lt;/li&gt;
        &lt;div class="tooltip"&gt;color name&lt;/div&gt;
      .....
      &lt;/ul&gt;
  </code></pre>
  
  <p>For the names whose text is wider than 160 pixels I want a hover event to reveal the tooltip element's text and I want this text to spill outside of its container, <code>ul</code>.</p>
  
  <p>I have read the following resources but none of them have helped me:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/8837050/allow-specific-tag-to-override-overflowhidden/29687454#29687454">Allow specific tag to override overflow:hidden</a></li>
  <li><a href="https://stackoverflow.com/questions/10446287/hovered-element-to-overflow-out-from-an-overflowhidden-element-css?utm_medium=organic&amp;utm_source=google_rich_qa&amp;utm_campaign=google_rich_qa">Hovered element to overflow out from an overflow:hidden element css</a></li>
  <li><a href="https://css-tricks.com/popping-hidden-overflow/" rel="nofollow noreferrer">https://css-tricks.com/popping-hidden-overflow/</a></li>
  <li><a href="https://stackoverflow.com/questions/7131310/css-spread-li-horizontally-across-ul?utm_medium=organic&amp;utm_source=google_rich_qa&amp;utm_campaign=google_rich_qa">CSS spread &lt;li&gt; horizontally across &lt;ul&gt;</a></li>
  <li><a href="https://stackoverflow.com/questions/37487863/why-does-inner-div-spills-out-of-outer-div?utm_medium=organic&amp;utm_source=google_rich_qa&amp;utm_campaign=google_rich_qa">Why does inner DIV spills out of outer DIV?</a></li>
  <li><a href="http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent" rel="nofollow noreferrer">http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent</a></li>
  <li><a href="https://stackoverflow.com/questions/29551733/what-causes-a-parent-container-to-cut-off-content-in-child-element">What causes a parent container to cut off content in child element?</a></li>
  <li><a href="https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346" rel="nofollow noreferrer">https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346</a></li>
  </ul>