title: change <li> background when hover a
body: <p>i have this menu:</p>
  
  <pre><code>&lt;div class="nav"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;AMORTECIMENTO&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the normal apearance:</p>
  
  <p><img src="https://i.stack.imgur.com/kotti.png" alt="normal apearance"></p>
  
  <p>and this is the apearance when users hover the menu:</p>
  
  <p><img src="https://i.stack.imgur.com/Ooari.png" alt=":hover apearance"></p>
  
  <p>So, i dont know how to setup the css, assuming i have biggest names on menu like: "AMORTECIMENTO"</p>
  
  <p>Any tips??</p>
  
  <p>i have tried this, but on small names, the menu is cutting the background...</p>
  
  <pre><code>.nav ul li a{
      display:block;
      font-size:15px;
      color:#000;
      padding:5px 7px;
      background:transparent;
      text-decoration:none;
  }
  
  .nav ul li:hover{
      background:url(../imagens/bola_fundo_menu.png) center no-repeat;
  }
  </code></pre>
  
  <p>My intention is, when user hover the menu item, on the <code>&lt;li&gt;</code> background, apear the basketball, and on <code>&lt;a&gt;</code> tag, the background is going to #FFF but i have small and big names on menu, so i can't set width of <code>&lt;li&gt;</code> and <code>&lt;a&gt;</code> tags... i think</p>