I designed a pure-css dropdown navigation menu similar to the suckerfish model, and I would like a little space between the main nav buttons and the nested ul that drops down. To accomplish this, I added a small amount of padding to the top of the nested list. While the works beautifully in EVERY other browser, the evil IE has a little problem.
The dropdown (nested ul) becomes visible because you're hovering on the li that contains it, either by hovering on the main nav button directly, or by hovering on the nested ul, which is a child of ul li. The problem is that no versions of IE consider the padding of an element part of the element itself where hover is concerned, so as soon as you mouse down from the main nav button into the dropdown, it drops the hover and the dropdown disappears.
HOWEVER, I have recently discovered that IE only does this if you don't have a background set. If I put the padding on the nested ul, and set a background, it works fine. Is this a haslayout issue? I don't think so because I tried a few other things to trigger haslayout with no avail. Is there any other way to fix this without a background? For a number of reasons, I cannot have one.
Oh, one other tidbit, I tried and it even works with a background of rgba(0,0,0,0), in other words a transparent background, which would be perfect, except only in IE versions supporting rgba (in other words, only 9 and up, so 9).
Any ideas would be GREATLY appreciated, although this is not my work alone and as such I will be unable to post any code. I suppose I could type up an example if necessary, but I'll see what you guys think first before I go through all that trouble. Thanks in advance!