I don't think it's the iframe, because the flyout is still visible over the padding, just not the animation/image. I wonder if it has more to do with the animation? Has it ever worked the way you were hoping (flyouts on top of everything)? If I hover over the top-level menu and get a flyout, it is UNcovered until the page in the iframe containing the animation begins to load, so it might be putting ?newest on top (if that is a thing)? Try putting just a static image in the iframe rather than a script call and see if the flyouts work properly. Then maybe embed something else there that is animated (like youtube or flash) to see what happens. Try hard coding it there, and also as a borrowed iframe. This is just to isolate if it is WHAT is in the iframe, or if it is ANYTHING in the iframe that is causing the problem.
Or... (and this might be safer) just ignore what I say, because I know nothing about ajax. This is the way I learn things, to see something broken, assume it worked at one time, figure out how it could have worked, and then try to make that happen again. It may seem like duct-tape and chicken-wire (quoting my father) but this approach has kept me continuously employed for a very long time.