How to make Superfish menu horizontal width 100%?

Question

I am using Superfish 1.4.8 as a horizontal menu

The menu is inside of a fixed-width div of 900px

I would like Superfish's width to be 100% (900px), and have each li's width automatically scaled depending on the number of items. The number of items in this menu will change over time.

Basically I want the same behavior of a 100% width TABLE and the auto-sizing behavior of TD's

I found the following CSS additions from an old 2009 post on how to do this:

.sf-menu { width: 100%; float: left; display: table;}
.sf-menu ul { display: table-row; }
.sf-menu ul li { display: table-cell; min-width: 20%; }

It looks like it should work, but it does not, the menu still appears exactly the same

Here it is on jsFiddle: http://jsfiddle.net/xRcJL/

Has anyone been able to make Superfish scale to 100% of a container?

Answer 1

UPDATE:

Check out this article for "jQuery Full-Width Navigation Plug-In": http://exscale.se/archives/2007/11/09/jquery-full-width-navigation-plugin/

---

It's because your .sf-menu li list items are floated to the left.

Check out edited JSfiddle with the updated style for:

.sf-menu li {
    /*float: left;*/
    position: relative;
}

Updated JSfiddle link: http://jsfiddle.net/xRcJL/1/

If you want to centre your NAV, you could do something like:

}
.sf-menu{
    text-align:center;
    background-color:#ccc;
}
.sf-menu li {
    position: relative;
    display:inline-block;
    margin:0 -2px;
}

See updated JSfiddle v2: http://jsfiddle.net/xRcJL/3/

*Works in Chrome, Firefox and IE8. Haven't tested in IE7&6.