Positioning a CSS drop-down menu

[gnubler]

I'm creating a CSS-layout site that uses a drop-down menu. I've graciously borrowed and adapted (and credited) a drop-down menu style from Stu Nicholls CSS Play. This is the exact menu I'm working with:

http://www.cssplay.co.uk/menus/basic_dd.html

Initially, this menu worked flawlessly in all browser tests (short of Mac IE - sigh). I then nested the entire menu within an absolutely positioned div, as I want it to sit on a particular spot on my page. Again, this tested fine on all my Mac browsers (except Mac IE - sigh) but suddenly in Safari I am unable to click on the drop-down menu items. They appear when I hover over a main list item, but then try to click on them - they disappear. The menu's containing div has a defined width, but not height.

Without having to paste all the code here or link to a sample page, can anyone suggest why this is happening? If not, I'll link up a live page tomorrow so you can see for yourself and let me know what I'm missing.

Many thanks.

EDIT: I'm playing around with it now, and I see that if I hover on the main link and then move my cursor down with lightning speed, I can indeed click on a sub-level link. However, no user is going to do this. Is this a known bug for Safari (v1.3.2 on OS 10.3.9)?

[Wickham]

When you put the drop down menus in a position: absolute div you will have separated the whole lot from the normal flow. I notice that the drop downs on the page you linked are quite deep, they must extend down below your position: absolute div, which may be why they are being cut off.

Is it possible to put some other content in the position: absolute div underneath? The drop downs will then extend over content which is also in the same div.

Or take the easy way out and get rid of the position: absolute containing div. Put everything in postion: relative divs. It should be possible to hold a div in a required position even then.