1

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

0
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.
6
  • Thats awesome. I dont think I can use it, because of the empty li's, but I sure learned a nice positioning trick. This solution is great if someone can take care of the empty li's! Thanks
    – tolborg
    May 26, 2012 at 10:54
  • Using empty <li>s is the simplest thing, but there are other ways. For example, you can set the margin-left style property to 150px for those items that have an empty space on their left. This has to be done via Javascript if the submenus are dynamical. Check this update: jsfiddle.net/Djpsf/2
    – MaxArt
    May 26, 2012 at 11:03
  • Oh I just realized. Your sub menu items are in rows not in columns :(
    – tolborg
    May 26, 2012 at 11:13
  • Yeah, that's why I said you have to reorder the items. Using multi-columns layouts can be done with some advanced CSS3 properties, but they're still unsupported by too many user agents.
    – MaxArt
    May 26, 2012 at 11:17
  • yea, and I need to support ie8. Well.. I think ill use your solution to position the sub menu. But ill use 4 sub ul's instead of one. Thanks!
    – tolborg
    May 26, 2012 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.