Menu icon Foundation
Help with tiered dropdown nav menu

First, let me say that I am using Foundation to create a WordPress theme. I have the menu system working with custom walkers and everything, so that is not an issue.

The issue is the structure of the menu system that the client insists upon.

They want some of the menu items to have sub-menu items that go three tiers deep. The menu bar itself is floated right, so all of the dropdowns come off aligned to the right side of the parent and extend to the left. This is fine and works perfectly well for the first tier of sub-menu items.

The core of the issue is that for all three tiers to be visible you have to be viewing page with a window width of 1380px+. This is obviously much too wide to be practical. If the viewer is on, say, a 720p (1280x720) monitor their screen will simply not be wide enough to view all of the menu items in the dropdowns. This is problematic because at that resolution they should be getting the desktop experience of the website, not the tablet version, but the desktop version is functionally broken and unusable for them.

Re-structuring the menu is really a last resort, as it took the client 4 internal meetings that took place over 2+ weeks in order to agree on this menu structure - and we really don't have the time to waste to let them come up with a new one.

Are there any design suggestions for how I might handle this that would be both functional and allow the menu to exist with its current structure and take up less space?

I appreciate any help!

wordpressdesignmenudrop downjavascriptcss

First, let me say that I am using Foundation to create a WordPress theme. I have the menu system working with custom walkers and everything, so that is not an issue.

The issue is the structure of the menu system that the client insists upon.

They want some of the menu items to have sub-menu items that go three tiers deep. The menu bar itself is floated right, so all of the dropdowns come off aligned to the right side of the parent and extend to the left. This is fine and works perfectly well for the first tier of sub-menu items.

The core of the issue is that for all three tiers to be visible you have to be viewing page with a window width of 1380px+. This is obviously much too wide to be practical. If the viewer is on, say, a 720p (1280x720) monitor their screen will simply not be wide enough to view all of the menu items in the dropdowns. This is problematic because at that resolution they should be getting the desktop experience of the website, not the tablet version, but the desktop version is functionally broken and unusable for them.

Re-structuring the menu is really a last resort, as it took the client 4 internal meetings that took place over 2+ weeks in order to agree on this menu structure - and we really don't have the time to waste to let them come up with a new one.

Are there any design suggestions for how I might handle this that would be both functional and allow the menu to exist with its current structure and take up less space?

I appreciate any help!