A _centred_ 3 tier menu

cherrio

I am having sooo much trouble finding a 3 tier horizontal (drop down) menu, that can be centered.

I can find many different examples, but all have the same problem. They are left aligned.

Take this one for example, it is perfect, except that it is left aligned. I know you could set a predetermined width and then use another div with margin-right: auto and margin-left: auto to have it centered. But the problem is you have to hard code the width of the menu.

I want to use this style menu for secondary navigation. The thing is that each page will have different top tier menu elements, some pages will only have 1 menu option others could have 20 (across different tiers). Thus hard coding the css width is not going to work (unless I use the style attribute on each page to set a custom width -messy).

There is two pints of beer for any one who can point out a nice CSS based 3 tier menu that is centered and can gracefully handle varying number of (top level) elements!:)

Thanks in advance.

p

I'm going to go out on a limb here and say that if you need a 3-tiered menu, then you probably need to reconsider your site structure itself.