I've got a huge site with a menu looking kinda like this:

  • Level one
    • Level two
      • Level three
        • Level four
        • Level four link 2
        • Level four link 3
  • Level one link 2
    • Level two


The top two levels will be horizontal in the header and the other two levels will be placed in a left aligned sidebar in the content section. My problem is the links in level three has a tendency to disappear or be misunderstood to belong to level two, maybe because it's got the same font size and weight as the active level two links.

I would really like to see some examples of how others have solved this but I can't seem to find any sites that has a similar solution as me. Is my solution bad for UX reasons perhaps?

Need help! Please post links to sites with a menu solution like mine.

closed as not constructive by JonW May 3 '12 at 12:47

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. If this question can be reworded to fit the rules in the help center, please edit the question.


One implementation is Tetra Pak web site looking like this:

enter image description here

And it looks like this when selected:

enter image description here

  • Thanks, but this isn't what I'm looking for really. I need a menu with the first two levels horizontally in the header and the next two levels vertical in a sidebar. OR, good reasons to why that is a bad idea. – Richard B Apr 20 '12 at 13:23

Jakprints has a top horizontal nav with multiple levels of side navigation. It uses a fat/flyout menu up top that allows you get all the way to levels 3 and 4 rather easily. Once inside you'll see multiple levels on the left. Navigate to the crew neck t-shirt-printing page to see an example. It might not be an exact match to what you're looking for with 2 top and 2 side levels, but it should give you some reference for the side and structuring levels 3 and 4. Multiple levels of typographic hierarchy are a must otherwise it will all blend together visually. Screenshot example of Jakprints flyout menu.Screenshot example of Jakprints nav..


Example of deep and compact menus you can find in WordPress Twenty-Eleven theme. Check how it works and play with menu you can here:

Fourth level you may find in this path: http://web-profile.com.ua/wordpress/dev/shortcode/subpages-in-shortcode/

This menu shows subpages to the current page only when user hovers current page. Subpages to other pages is hidden until user will move mouse to another menu item. This menu works in pure css and without javascript.

  • Same answer as I gave Benny in his reply: I need a menu with the first two levels horizontally in the header and the next two levels vertical in a sidebar. OR, good reasons to why that is a bad idea. Thanks for the effort though! – Richard B Apr 20 '12 at 13:24

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