How do I determine when a child of an overflow:hidden parent is overflown

Question

Below is my HTML and CSS. I want to use javascript to determine when one of the LIs is overflown. I then want to put that item into a popup menu, similar to Win32 toolbars. I need to know when an LI is overflown and which LIs are overflow.

I'm fine if this only works in modern browsers and I don't want to use a framework like JQuery.

<div id="menu">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

#menu ul {
margin: 0px;
list-style-type: none;
list-style-image: none;
height: 28px;
overflow: hidden;
}

Answer 1

You need to do this with JavaScript. Compare scrollHeight and offsetHeight. If the scrollHeight is bigger, it's overflowed. E.g.

function overflowed(ElementID) {
  var Element=document.getElementById(ElementID);

  return Element.scrollHeight>Element.offsetHeight;
}

Code in action.