Increasing the width of button by a few percent on hover - html

Question

So, I have this made.
HTML
<div id="navholder" class="bgd">
<nav id="nav">
<ul>
<li>Почетна</li>
<li>Делатност</li>
<li>Историјат</li>
<li>Службе</li>
<li>Колектив</li>
<li>Контакт</li>
</ul>
</nav>
</div>
#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?
Thanks.

Answer 1

You could use transform: scale()
jsFiddle example
#nav a:hover {
transform:scale(1.3,1.3);
-webkit-transform:scale(1.3,1.3);
-moz-transform:scale(1.3,1.3);
}

Answer 2

Just increase the padding on hover:
#nav a:hover {
color: white;
background: black;
padding: 5px 10px; /* 5px top/bottom, 10px left/right */
}

Answer 3

You may set width with em's and increase font-size.
Also, you may add border/padding on hover:
#nav a:hover {
border-right: solid 20px black;
/* or padding-right */
}