View Full Version : Need help with dynamic horizontal drop menu

06-07-2012, 06:08 PM
I'm working on a multi-column drop menu whose content will be dynamic (filled with multiple languages). As such, I can't hardcode any margins or button widths and the upper level buttons need to stretch to fill the full width of the menu (1000px) with even spacing in between. The first menu item must always be on the far left and the last item always on the far right. I accomplished all this by using a table and display:block. The menu can be seen here: example 1 (http://www.timberflooringtools.com/navmenu2/navmenu.html).

The menu works exactly as it's supposed to - however, I need to come up with a pure CSS solution without using tables. I've searched and searched for answers and I've found a little code that will help me with the upper menu. The answers seems to be in display:table and display:table-cell which can be used to center a menu and stretch it to full width. I can remove the table stuff and get the upper nav to look exactly as it should. However, this approach completely messes up the lower drop menus because they seem to inherit the CSS properties of the upper items. Please see example 2 (http://www.timberflooringtools.com/navmenu2/navmenu2.html).

Is there any way to alter my code so that the lower drop boxes work exactly like they do in the first example (using display:block) and the upper menu works exactly like it does in the second example (using display:table).

I would be extremely grateful if someone can help me out with this! I've tried everything I can think of to no avail!

06-07-2012, 06:46 PM
Well...I've made some progress. Please see example 4 (http://www.timberflooringtools.com/navmenu2/navmenu4.html).

I gave the upper menu li's a class with the display:table-cell. Now the lower parts are not inheriting that. However, now the absolute positioning of the dropboxes has gotten messed up. They are all supposed to be centered underneath the main nav menu links, except the rightmost one which should be right justified. (see example 1 (http://www.timberflooringtools.com/navmenu2/navmenu.html) again) So although the top and bottom menus look good, the bottom menus are not positioned correctly. Can anyone take a look at my code and offer me any suggestions? I would greatly appreciate it!