kan3xiao
06-07-2012, 05: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!
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!