ホバーでボタンの幅を数％増やす

Question

だから、これを作った。

<div id="navholder" class="bgd"> 
<nav id="nav"> 
    <ul> 
     <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> 
    </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: ? 
    } 

HTMLは、私は一度、マウスでホバーボタンは約20％増加します。私が見つけた問題は、「width：60px」のような正確な幅を使用すると、すべてのボタンが同じサイズであるわけではありません。

一方、「width：120％」を使用すると、ページには、クラス.bgdによって定義された#navholder要素全体の幅が使用されます。

どうすればいいのですか？

ありがとうございました。

Answer 1

あなただけのホバー上のパディングを増やす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

emで幅を設定し、font-sizeを大きくすることができます。

また、あなたがホバー上の境界線/パディングを追加する可能性があります。

#nav a:hover { 
    border-right: solid 20px black; 
    /* or padding-right */ 
} 

Answer 3

を使用することができます。

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