IE7 hover on div being lost when you touch a child element of that div

Question

In Theory

I have a div (container) that when hovered over one of its child divs appear (drop-down). Drop-down contains links images etc. and when I leave it and container then drop-down disappears.

<div id="container">
  <div>Hover over me to see extra stuff</div>
  <div id="drop-down">
     <div>
       <img />
     </div>
     <div>
       <a />
       <p><span>Info</span><span>More</span></p>
     </div>
     <img />
  </div>
</div> 

Heres the jQuery

$('#container').hover(
  function(){ $(this).find('#drop-down').addClass('hover'); },
  function(){ $(this).find('#drop-down').removeClass('hover'); }
);

Heres the CSS for hover

#container #drop-down {left: -9999px;}
#container .hover {left: 0;}

In Practice

In every browser other than IE7 it works perfectly but when I highlight over the spans in the first containing div in drop-down then drop-down dissappears for some reason as if I had left container.

The Question

I have been slamming my head against a wall for nearly 3 hours trying to find all the ie7 bugs I could to see if any were relevant but sadly with no luck. I originally thought it could be 'z-index' issue but as it is actually displaying above the content below this can't be the case (and I've tried it by setting 'position:relative; z-index:9999;' on both the p and the spans). Other than that I am completely stumped. I do however know that the any items below that div (e.g. the image tag in the example above) do create the issue after skirting round the spans on the padding of the p.

Further clarification: I've found it is to do the elements the lying underneath the spans but as they aren't showing through I have no idea how to fix it. Also, it doesn't matter what element is underneath just if there is a div underneath that you can "enter" (i.e. you are not already in it) then you lose the hover and drop-down disappears.

I know I haven't put up the CSS but can anyone think of any reason why this could be happening? Also, I have disabled all CSS working directly on it and it still is affected but this issue.

Answer 1

As said in the comments

Putting a background color on the span will make the hover work. For some reason when you hover over a transparent background in IE, it considers the mouse to not be in the dom object (or in this case, the span) anymore, but instead in the element below it and calls the mouse out event.

Microsoft considers this a bug and links to this blog entry from there msdn entry

Answer 2

Have found what is causing elements to disappear in old version of IE. Copy add this to your css

div { display: inline-block; }

div { display: block; }

This explains the bug nicely.

Answer 3

div { display: inline-block; }  div { display: block; } 

This worked for me... wow what a pain.