The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Equal Width Menu Items Problem

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #157650

    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

    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:

    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.


    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.