Sliding nav hover

by Joshua Powell

HTML

<header>
    <nav>
        <ul id="navigation">
            <li><a href="index.html">Home</a>

            </li>
            <li><a href="about.html">About</a>

            </li>
            <li><a href="design.html">Design</a>

                <ul>
                    <li><a href="#">Web</a>

                    </li>
                    <li><a href="#">Illustrations</a>

                    </li>
                </ul>
            </li>
            <li><a href="development.html">Development</a>

                <ul>
                    <li><a href="#">Front End</a>

                    </li>
                    <li><a href="#">Back End</a>

                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

CSS

a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
}
header {
    background: #fe7e01;
    height: 6em;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}
#navigation {
    width: 100%;
    height: 5em;
    position: absolute;
    left: 1em;
    top: 0;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#navigation li {
    width: 24%;
    height: 91%;
    font-family:'century gothic';
    font-size: 2em;
    line-height: 3em;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
}
#navigation a {
    color: rgba(0, 0, 0, 0.8);
    display: block;
    width: 100%;
    height: 100%;
}
#navigation a:hover {
    color: rgba(255, 255, 255, 0.8);
}
nav ul li ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none;
}
#active {
    border-bottom: 5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 1px !important;
}

JavaScript

function navActive() {

    var i = document.location.href.lastIndexOf("/"),
        currentA = document.location.href.substr(i + 1),
        navLi = $('#navigation li a');

    $('#navigation').append('<li id="active"></li>');

    $(document).on('mouseenter', '#navigation li a', function () {
        var leftWidth = $(this).stop(true).position().left;
        $('#active').animate({
            left: leftWidth
        });
    }).on('mouseout', '#navigation li a', function () {
        var homeWidth = $("#navigation li a[href^='" + currentA + "']").stop(true).position().left();
        $('#active').animate({
            left: homeWidth
        });
    });
}

navActive();