Trying to set up a tab bar with additional padding on hover, but encountering an issue where the parent div moves on hover state.
Here is the HTML code:
<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 the CSS code:
#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;
}
View the working sample here.
Any suggestions on how to fix this issue?