Background com Hover

Front-end
, ,
#1

Estou desenvolvendo uma aplicação web e gostaria de que quando passar o mouse por cima dos links o fundo ficasse branco mas ele fica branco só envolta da palavra e não ocupa todo o espaço azul nas laterais e não cobre com a cor do fundo o icon.

erro

HTML

<aside id="lateral">

  <div id="lado_esquerdo_menu" class="nano">
   <ul class="nano-content">
  <li>
      <a href="index.html"><span id="home">HOME</span></a><br><br>
  </li>
  <li class="sub-menu">
    <a><i class="arrow fa fa-angle-right pull-right"></i>Camisetas</a><br><br>
   
  </li>
  <li class="sub-menu">
    <a><i class="arrow fa fa-angle-right pull-right"></i>Calçados</a><br><br>
   
  </li>
  <li class="sub-menu">
    <a><i class="arrow fa fa-angle-right pull-right"></i>Bermudas</a><br><br>
 
  </li>
  
     <li class="sub-menu">
    <a><i class="arrow fa fa-angle-right pull-right"></i>Contato</a>
 
  </li>

</ul>
</div>

 </aside>

CSS

@media screen and (min-width: 340px)  and (max-width:640px) {
        
       .nano-content li :hover{
background-color: white;
width: 100%;
color:#00008B;
font-size: 11pt;
   }
        
        
        .nano-content{
            margin-left: 20px;
            font-size: 10pt;
        }

       
         #lateral{
            float:left; 
        
            padding: 5px; 
            width: 35%; 
                height: 100%;
                overflow:auto; 
                 background-color: #00008B;
                 margin-top: 40px;
                 
                  }
              }
#2

Para o ícone vim com o hover no link,
Exemplo:

<li class="exemplo"><a href="#"><i class="fa fa-angle-right"> Link</i></a></li>

.exemplo{
   display: block;
   width: 200px; 
   background-color: #3d8aba;
}

.exemplo:hover{
   background-color: white;
   width: 200px; 
}
#3

não funcionou