Perchè l'effetto si applica solo al primo "li" ?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>