Better 100% navigation

One of the basic navigation menus is a strip of links spread across the top of the page. This is hard to pull off programmatically… The old way (TABLEs, or the CSS `display: table;` property) allows the nav to grow past 100% width if too many links are added. The new way (`display: flex;`) is ill supported. Thankfully, the two methods can be combined fairly safely :-p This fiddle demonstrates a 100% width menu that wraps to two lines when the text becomes longer than the available space. The wrapping behavior relies on the new `flex-wrap` property, which is only supported in Chrome 21+ and Opera 12.10+. This property is part of the CSS3 Flexbox recommendation (http://dev.w3.org/csswg/css3-flexbox/#flex-wrap) and should be more widely supported soon. For all other browsers (back to IE8: http://caniuse.com/#search=table), `display: table;` will be used instead.

by thirdender

HTML

<nav>
  <ul>
    <li><a href="#">tea</a></li>
    <li><a href="#">teabags</a></li>
    <li><a href="#">instant tea</a></li>
    <li><a href="#">teaware</a></li>
    <li><a href="#">tea sets</a></li>
    <li><a href="#">teapots</a></li>
    <li><a href="#">teacups</a></li>
    <li><a href="#">tea accessories</a></li>
    <li class="noRightBorder"><a href="#">tea samplers</a></li>
    <li class="noLeftBorder dark"><a href="#">gift ideas</a></li>
    <li class="dark"><a href="#">specials</a></li>
  </ul>
</nav>

SCSS

@mixin linear-gradient($start, $end) {
    background-color: $start;
	background-image: -webkit-gradient(linear, left top, left bottom, from($start), to($end));
	background-image: -webkit-linear-gradient(top, $start, $end);
	background-image: -moz-linear-gradient(top, $start, $end);
	background-image: -ms-linear-gradient(top, $start, $end);
	background-image: -o-linear-gradient(top, $start, $end);
}

nav {
    display: table;
    width: 100%;
    ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul {
        display: table-row;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        flex-wrap: wrap;
        li {
            display: table-cell;
            white-space: nowrap;
            -webkit-flex-grow: 1;
            -moz-flex-grow: 1;
            flex-grow: 1;
            text-align: center;
            a {
                $start: #fff;
                $end: #e1dfd3;
                @include linear-gradient($start, $end);
                $padding-top: .52em;
                padding: $padding-top 1em ($padding-top + .12em);
                $border-color: #bebdb9;
                position: relative;
                display: block;
                &:hover {
                    @include linear-gradient(darken($start, 5%), darken($end, 5%));
                }
                &:before, &:after {
                    content: ".";
                    width: 0;
                    overflow: hidden;
                    position: absolute;
                    top: $padding-top;
                    line-height: 1.2em;
                    margin-top: .2em;
                }
                &:before {
                    border-left: 1px dotted $border-color;
                    left: 1px;
                }
                &:after {
                    border-right: 1px dotted $border-color;
                    right: 1px;
                }
 ...