The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Equal Width Menu Items Problem
I’m trying to create a menu with equal width menu items. A working example I created is here:
The problem is this – when I try to make this work on my site, it doesn’t. See the top menu (about, practice areas, etc) at http://mdvlawfirm.com/about/
The only difference I can find is that, since I’m using Superfish for my menu, lines are inserted before each item
Remove all the rules you’ve applied to .sf-menu li, since they aren’t making a difference. Also, remove display: table-cell; from .sf-menu a and add:
As an aesthetics thing, you should have some padding on the top and bottom of the menu items. They’re so low profile, they’re easy to miss.
As I said, you need to remove pretty much all of the styles on the .sf-menu lis.
Basically, your current code is setting width’s on the lis even though you only want to set width’s on the a‘s within them.