challenge: css overlap dropdown

I am sitting here with a css challenge and I cannot even start to imagine how to do it. In fact, I think it is impossible to do, but just thought I'd ask you guys in case I am wrong:

I want to create a dropdown menu (something like coolmenus) that can be created dynamically out of a database.

The first thing I want to happen is that all primary navigation items are lined up horizontally next to eachother. That one was easy: I put each item into a DIV and float them left.

Now the problem: whenever a user moves the mouse over a primary navigation item, a dropdown menu will appear underneath it. However (!), this dropdown menu may be wider than the DIV above it! Here an example:

------------- -------------
| Item 1 | | Item 2 |
------------- -------------
-----------------------
| Dropdown 1 |
-----------------------
-----------------------
| Dropdown 2 |
-----------------------

The problem I see is that I want the dropdown menu to always be left aligned with the primary navigation item. As I don't know the absolute position of either of them (being created dynamically out of a database), the only way to get the left alignment is to write the DIVs (primary item and its dropdown) directly after each other in the code. However, if I do that I cannot get the primary navigation items to appear one next to each other. Well, I could, but they wouldn't overlap with the dropdowns as I want them to.

To give you an idea of what I am trying to achieve, have a look at the dropdown here:

http://www.rmitenglishworldwide.com...ts/products.asp

Use un-ordered lists for each of your main menu items & the drop downs i.e.



And do some formatting with CSS (see this article).

Its both the semantically correct way & the best way to describe your list in HTML. But requires a little CSS magic to help it along the way.

-D

Hi DEFusion,

I was half way on the right way. I did have the ULs originally, but then I thought it will get me into trouble if I try to position half of them absolut and the other half not. So I took them out again.

I will give the code a try. It looks good to me, but unfortunately the examples don't work at the moment.

Thanks for your help!