Posted 21 May 2009 - 09:36 AM
Thanks for the speedy response and I realise my description wasn't exactly clear, but some of what's going on is pretty difficult to get across - as well as the above I had collapsiong margins on elements below the drop downs, which made it awesomely confusing.
It would be pretty pointless posting the code as much of it contains images etc that would have to be replicated to make it work. In any case, I found a 'brute force' solution that actually validates and works in IE and FF for once. Here's a rough description in case someone finds it useful:
The 'dropdown' consists of two main parts, a base layer<div> that is relatively positioned and a dropdown layer<div> that is absolutely positioned. The dropdown layer has two seperate states, display: none and a :hover state. Using it 'as is' will give you nightmares. To make it work I removed the floats, contained the entire dropdown in a third <div> and added an img tag exactly the same size as the background layer to that div. I then forced the margins of the dropdown over the img, isolating the dropdown from the rest of the page - no scroll problems, no margin collapse etc. The margin distortion is pretty extreme (depending on the size of the dropdown) but seems to be unaffected by screen resolution or other settings in any case. It's not pretty, but it works.