css選項卡欄高度問題

Question

我嘗試在懸停狀態下實現帶有額外填充的選項卡欄。 但問題是懸停狀態實際上它移動父div。

你可以看到下面的html;

<div id="statNav"> 
     <a href="#">Gogus</a> 
     <a href="#">Kol</a> 
     <a href="#">Gogus</a> 
     <a href="#">Gogus</a> 
     <a href="#">Gogus</a> 
     <a href="#">Omuz</a> 
     <a href="#">Gogus</a> 
</div> 

and css;

#statNav{ 
    width:100%; 
    border-bottom:2px solid #9B2F2C; 
    overflow:auto; 
} 

#statNav a{ 
    float:left; 
    background-color:#333333; 
    color:white; 
    font-size:12px; 
    font-weight:bold; 
    text-align:center; 
    width:62px; 
    padding-top: 5px; 
    padding-bottom:5px; 
    border-right: 1px solid #777777; 
} 

#statNav a:first-child{ 

    -webkit-border-radius: 5px 0px 0px 0px; 
    border-radius: 5px 0px 0px 0px; 
} 

#statNav a:last-child{ 

    -webkit-border-radius: 0px 5px 0px 0px; 
    border-radius: 0px 5px 0px 0px; 
    border-right:none; 
    width:63px; 
} 

#statNav a:hover{ 

    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
    background-color:#9B2F2C; 
    padding-top: 15px; 
} 

這是工作示例;

http://jsfiddle.net/Kg3p4/

我該怎麼解決呢？

Answer 1

您可以通過在非徘徊標籤利潤率和懸停刪除它們來對抗增加填充的大小解決這個問題。請注意，邊距的大小等於您的懸停和非懸停填充之間的差異。

#statNav a{ 
    margin-top: 10px; 
    padding-top: 5px; 
} 
#statNav a:hover{ 
    margin-top: 0; 
    padding-top: 15px; 
} 

我已更新您的jsFiddle，該解決方案的simple demo。

Answer 2

您可以通過添加一個等於填充差異的負邊距底部來修改懸停狀態。事情是這樣的：

#statNav a:hover{ 

    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
    background-color:#9B2F2C; 
    padding-top: 10px; 
    margin-bottom: -5px; 
} 

http://jsfiddle.net/Kg3p4/5/