Equal Width Menu Items Problem

[siouxfan45]

I’m trying to create a menu with equal width menu items. A working example I created is here:
http://codepen.io/anon/pen/aehbq

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

[Ed]

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:

width: 25%;
float: left;
display: block;

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.

[Ed]

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.

[Author]

Posts