Increasing the width of button by a few percent on hover

So, I have this made.


<div id="navholder" class="bgd">
  <nav id="nav">
    <li><a href="">Почетна</a></li>
    <li><a href="">Делатност</a></li>
    <li><a href="">Историјат</a></li>
    <li><a href="">Службе</a></li>
    <li><a href="">Колектив</a></li>
    <li><a href="">Контакт</a></li>
#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: ?

I want the buttons once hovered over with a mouse to increase about 20%. The problem that I found is if I use the exact width like “width: 60px” not every button is of the same size.

On the other hand if I use “width: 120%” I believe the page takes the width of the whole #navholder element which is defined by the class .bgd.

Any ideas on how can I make this happen?


You could use transform: scale()

jsFiddle example

#nav a:hover {