:hover non funziona

[zacca94]

<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" ?

[zacca94]

<style type="text/css">
    header {
        background: #fff;
        width: 50%;
        margin: 20px auto;
    }
    nav ul {
        list-style: none;
        margin: 0;
    }
    nav > ul > li {
        width: 100px;
        height: 100px;
        cursor: pointer;
        background-color: #111;
        float: left;
        color: #fff;
        margin: 10px 0 0 5px;
        position: relative;
        text-decoration: none;
        font-size: 1.8em;
        -webkit-transition: all 0.5s;
           -moz-transition: all 0.5s;
                transition: all 0.5s;
    }
    nav > ul > li > i {
        font-size: 40px;
        position: absolute;
        left: 35%;
        top: 30%;
    }
    nav > ul > li > small {
        font-size: 12px;
        position: absolute;
        left: 10%;
        bottom: 10%;
    }
    nav > ul > li > right {
        position: fixed;
        top: 10%;
        right: 10%;
    }
    nav > ul > li.active {
        background-color: #0DADEF;
    }
    nav > ul > li:not(.active):hover {
        color: #fff;
        background: #0DADEF;
    }
    nav > ul > li > ul {
        display: none;
    }

    
</style>

<header>
    <nav>
        <ul>
            <li class="active">
                <i class="fi-monitor"></i>
                <small>Home</small>
            </li>

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

            <li>
                <i class="fi-database"></i>
                <small>Database</small>
                <ul>
                    <li>
                        <i class="fi-upload"></i>
                        <small>Import Hands</small>
                    </li>

                    <li>
                        <i class="fi-download"></i>
                        <small>Export Hands</small>
                    </li>

                    <li>
                        <i class="fi-wrench"></i>
                        <small>Optimize</small>
                    </li>
                </ul>
            </li>
            
            <li class="right">
                <i class="fi-play"></i>
            </li>
        </ul>
    </nav>
</header>

Risolto così...