codice:
<style type="text/css">
    header {
        background: #fff;
    }
    nav > ul {
        float: left;
        list-style: none;
    }
    nav > ul > li {
        display: inline-block;
        float: left;
        cursor: pointer;
        background-color: #111;
        margin-left: 10px;
        padding: 40px;
        color: #fff;
        -webkit-transition: all 0.2s;
           -moz-transition: all 0.2s;
                transition: all 0.2s;

    }
    nav > ul > li.active {
        background-color: #fff;
        color: #111;
        border: 1px solid #111;
    }
    nav > ul > li:hover {
        border-width: 20px;
        border-color: #fff;
    }
    nav > ul > li > i {
        font-size: 36px;
        width: 40px;
    }
    nav > ul > li > small {
        font-size: 13px;
        margin-left: -30px;
        margin-top: 10px;
        position: fixed;
    }
</style>

<header>
    <nav>
        <ul>
            <li class="active">
                <i class="fi-home"></i>
                <small>Main</small>
            </li>

            <li>
                <i class="fi-graph-trend"></i>
                <small>Statistics</small>
            </li>

            <li>
                <i class="fi-database"></i>
                <small>Database</small>
            </li>
        </ul>
    </nav>
</header>
Perchè l'effetto si applica solo al primo "li" ?