Question

Please look at the image below.

Right now I am doing this with a lot of unordered lists – 5 actually. I would like to do it in a single nested ul.

I have two problems:

1. how do I create the border-bottom on the horizontal menu, if the sub menu is nested inside the horizontal menu?

2. The sub menu is made of 4 different ul’s. Can I do the 4 columns using a single ul? Some menu items may fill to lines.

A pint of beer to the one who fixes either problems 🙂

http://dl.dropbox.com/u/333152/menu.png

Answer 1

I don’t know if I got it, since you didn’t post any code, but try this:
http://jsfiddle.net/Djpsf/1/

1. Notice that you have to know the height of the submenus in orger to set the correct bottom margin on #main.
2. It’s possible but overcomplicated and you have to reorder the items in the submenu and add some empty items.