title: IE7 z-index with an unordered list
body: <p>The following example is a very simplified version of my top navigation.</p>
  
  <p><a href="http://jsfiddle.net/AEqxT/" rel="nofollow">http://jsfiddle.net/AEqxT/</a></p>
  
  <p>If you look in most browsers, you should see two green list items next to eachother, with a blue box or 'badge' sitting on top, bridging the gap between the two. In IE7 however, the blue box always falls below the second li. I've tried all manner of fixes to this. Setting a higher z-index to the parent ul didn't change anything, and if I use <code>position: relative;</code> on the 'badge', it loses its width and height.</p>
  
  <p>Is there an obvious fix to this that I am missing?</p>