title: Stop text moving when border change width
body: <p>i am facing a really annoying problem ^^. My left menu text is moving when the border is expanded with jquery. I am trying everything to stop moving the text. but nothing works :/
  Any idea ? </p>
  
  <p>CSS for left menu?</p>
  
  <pre><code>.main .left {
      width: 220px; 
      margin-right: 20px; 
      float: left;
  }
  .main .box {
      margin-top: 10px;
  }
  .main .box .bname {
      font-size: 15px; 
      background: url(../images/sepa.png) no-repeat left center; 
      padding: 5px 0 5px 15px;
  }
  .main .box ul {
      margin: 10px 0 0 0; 
      padding: 0; 
      list-style: none;
  }
  .main .box ul li {
      padding-left: 10px; 
      margin-bottom: 1px; 
  }
  .main .box ul li a {
      display: block; 
      padding: 3px;
  }
  
  .main .box ul li a:hover{}
  </code></pre>
  
  <p>My jquery for animated border:</p>
  
  <pre><code>jQuery(document).ready(function($) {
      $(".box ul li").hover(function() {
          $(this).animate({borderWidth: 20}, "fast");
      }, function() {
          $(this).animate({borderWidth: 2}, "fast");
          });
  });
  </code></pre>
  
  <p>The problem is when the border animate ( borderWidth: 20 ) it will move text to the right. I want the text fixed on the same place.<br>
  my html:</p>
  
  <pre><code>&lt;div class="box"&gt;
     &lt;div class="nadpis"&gt;Dokumenty&lt;/div&gt;
     &lt;ul&gt;
         {foreach $MENU['USER1'] as $row}
             &lt;li&gt;
                 &lt;a href="{!$row-&gt;odkaz}" {widget  rsLista 'MENU',$row-&gt;idecko,$MENU_WEB['USER1'],$MENU_SLOZKA['USER1'],$row-&gt;nazev}&gt;{$row-&gt;nazev}&lt;/a&gt;
             &lt;/li&gt;  
         {/foreach}
     &lt;/ul&gt; 
  &lt;/div&gt;
  </code></pre>