title: Increasing the width of button by a few percent on hover
body: <p>So, I have this made.</p>
  <p>HTML</p>
  <pre><code>&lt;div id=&quot;navholder&quot; class=&quot;bgd&quot;&gt;
  &lt;nav id=&quot;nav&quot;&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href=&quot;&quot;&gt;Почетна&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;&quot;&gt;Делатност&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;&quot;&gt;Историјат&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;&quot;&gt;Службе&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;&quot;&gt;Колектив&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;&quot;&gt;Контакт&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  
  #navholder {
  height: 60px;
  text-align: center;
  margin: 0 auto;
      }
  
  #nav {
  height: 30px;
  margin-top: 10px;
  background: #B8860B;
      }
  
  #nav ul li{
  margin-top: 3px;
  display: inline;
  font-size: 120%;
  opacity: 1.0;
      }
  
  #nav ul li a {
  display: inline-block;
  height: 120%;
  padding: 5px;
  -webkit-box-shadow: -1px 0px 22px rgba(50, 50, 50, 0.5);
  -moz-box-shadow:    -1px 0px 22px rgba(50, 50, 50, 0.5);
  box-shadow:         -1px 0px 22px rgba(50, 50, 50, 0.5);
  border: 1px solid white;    
  opacity: 1.0;
  background: #DAA520;
  
      }
  
  #nav a:hover {
  color: white;
  background: black;
  width: ?
      }
  </code></pre>
  <p>I want the buttons once hovered over with a mouse to increase about <code>20%</code>. The problem that I found is if I use the exact width like &quot;<code>width: 60px</code> not every button is of the same size.</p>
  <p>On the other hand if I use <code>width: 120%</code> I believe the page takes the width of the whole <code>#navholder</code> element which is defined by the class <code>.bgd</code>.</p>
  <p>Any ideas on how can I make this happen?</p>
  <p>Thanks.</p>