Horizontal Menu/Submenu help needed!

Ok, here’s the scoop...I need to create a CSS based horizontal menu with horizontal submenus directly underneath. An example of how it might work can be seen here:

http://www.alistapart.com/d/hybrid/hybrid-4.html

However, there’s a problem with this implementation that I need to find a fix for. What I need is for the submenus to dynamically appear more centered under each main menu item. So in the case of the example above, if a user clicks on Renaissance then the submenu would appear aligned to the left just under the menu item...if a user clicks on Digital, then the submenu would appear right-aligned just under it’s menu item...and anything inbetween would be more centered under its menu item and aligned a little more to the left or right without going over the right or left boundaries. Does that make sense? Basically I want to get away from having everything plush left for the submenu...but I don’t want them simply aligned directly underneath it’s main menu item due to the fact that if a submenu has a few items then the far right menu item would cause them to overlap to the right a bit.

Hopefully this is pretty clear. I’m assuming that some javascript would be needed to make this work...so any links or tutorials or whatnot anyone knows of that will help would be greatly appreciated!

Thanks a bunch!

Jeff

Try here if that’s what I’m thinking you mean: http://positioniseverything.net/css-dropdowns.html

Attached is an example of what I mean. Notice the alignment of the submenus? Basically they are aligned in relation to it’s respective menu and don’t go outside the left and right boundaries of the menu. Compare it to the way it’s implemented here:

http://www.alistapart.com/d/hybrid/hybrid-4.html

If I can figure this out I’ll be happy as a lark! LOL!

It’s not a well known fact, but the common field Lark is the only species in the avian fauna that suffers from chronic depression... how ironic is that!

I found a couple of DOM and DHTML solutions, this discussion looked interesting

http://www.milonic.com/mfa/2005-October/006561.html

Possible with plain CSS (for browsers, IE needs some code loaded):

http://www.aplus.co.yu/adxmenu/examples/

See the last example, this could fit your needs.

Greetz Marc

Quote from: MadeMyDay at Dec 13, 2005, 08:15 AM

Possible with plain CSS (for browsers, IE needs some code loaded):

http://www.aplus.co.yu/adxmenu/examples/

See the last example, this could fit your needs.

Greetz Marc

This is probably closer to what I want. However, notice that the submenu is left aligned directly underneath it’s respective menu. What if the last menu item has, say, five to ten submenu items? Will the submenu stretch across to the right outside a reasonable page boundary? There lies the problem and what I’m aiming to fix. There’s got to be a script or something that will dynamically place the submenu underneath it’s menu so that it does not go outside a given boundary.

Man...this is making my brain itch! LOL!

Use the DropMenu snippet to call, and use the builtin support for adding a class of "last" to the last item of each row. Revise your CSS accordingly.