title: How do I determine when a child of an overflow:hidden parent is overflown
body: <p>Below is my HTML and CSS. I want to use javascript to determine when one of the <code>LI</code>s is overflown. I then want to put that item into a popup menu, similar to Win32 toolbars. I need to know when an <code>LI</code> is overflown and which <code>LI</code>s are overflow.</p>
  
  <p>I'm fine if this only works in modern browsers and I don't want to use a framework like JQuery.</p>
  
  <pre><code>&lt;div id="menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;item1&lt;/li&gt;
      &lt;li&gt;item2&lt;/li&gt;
      &lt;li&gt;item3&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  #menu ul {
  margin: 0px;
  list-style-type: none;
  list-style-image: none;
  height: 28px;
  overflow: hidden;
  }
  </code></pre>