<ul class="menu line" id="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Gallery</a></li>
	<li><a href="#">Contact</a></li>
	<li class="marker"></li>
</ul>

@import "compass/css3";

/* ---- reset ------*/
html, body, ul, li, a, a:visited {
    border: none;
    font: inherit {
        size: 100%;
    };
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

html {
  line-height: 1;
}


body {
    background: #f2f2f2;
    font: {
        family: "Unica One";
        size: 1.5em;
    };
    text-shadow: 0 1px 0 white;
}


/* --- skeleton --- >> */

$entries: 4;
$marker-width: 100%/$entries/1.7;

ul.menu {
    display: table;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
    & > li {
        display: table-cell;
        padding  {
            left: 0;
            right: 0;
        };
        position: relative;
        width: 100%/$entries;
        &.marker {
            display: block;
            left: -1*$marker-width;
            overflow: hidden;
            padding: 0;
            position: absolute;
            @include transition(left .2s ease-in);
            @include translate3d(0, 0, 0);
        }
        @for $i from 1 through $entries {
            &:nth-child(#{$i}):hover ~ .marker {
                left: $i*(100%/$entries);
                @include transition(left .7s ease-out);
            }
        }
        &:hover > a {
           @include transition(color .7s ease-in);
        }
    }
    &.line > .marker {
        bottom: 0;
        margin-left: -1*$marker-width - (100%/$entries - $marker-width) / 2;
        width: $marker-width;
    }
}

/* << --- skeleton --- */


/* example styles >> */

#menu {
    margin: 2em auto;
    & > li {
        padding: {
            bottom: 1em;
            top: 1em;
        };
        &:hover {
            & > a {
                color: #c6342e;
            }
        }
        & > a {
            color: #393939;
            font-family: "Ubuntu", sans-serif;
            text-decoration: none;
            text-transform: uppercase;
        }
    }
    &.line > .marker {
        background: #c6342e;
        box-shadow: 0 1px 0 white;
        height: 2px;
        padding: 0;
    }
}