CSS a:hover moving text - css

Question

I am having issues with text moving them I hover over the element. It is working fine until you hover over it.
So just to clarify you run the mouse over the text and the background colour and everything changes correctly, just the text moved higher than origional text.
This is the CSS code I have for this element:
#top_login_panel ul.menu_topPanel li.item-8 {
background: url("../images/menu/top-panel-login-bg.png") no-repeat scroll 0 0 hsla(0, 0%, 0%, 0);
height: 43px;
width: 145px;
}
#top_login_panel ul.menu_topPanel li.item-8 a {
width: 145px;
}
#top_login_panel ul.menu_topPanel li.item-8 a:hover {
background-image: url("../images/menu/top-panel-login-bg1.png") !important;
background-position: center center !important;
background-repeat: no-repeat !important;
color: hsl(0, 1%, 25%);
margin-left: -3px;
margin-top: -8px;
width: 114px;
}
#top_login_panel ul.menu_topPanel li.item-8 a {
display: block;
font-size: 12px;
padding: 22px 0 0 35px;
}
Can you please advice how to resolve this issue?
Thanks

Answer 1

try this.,
#top_login_panel ul.menu_topPanel li.item-8 a:hover {
background-image: url("../images/menu/top-panel-login-bg1.png") !important;
background-position: center center !important;
background-repeat: no-repeat !important;
color: hsl(0, 1%, 25%);
}
#top_login_panel ul.menu_topPanel li.item-8 a {
display: block;
font-size: 12px;
padding: 22px 0 0 35px;
margin-left: -3px;
margin-top: -8px;
width: 114px;
}
I changed the margin property to a tag

Answer 2

The problem is that the hover block of CSS code has properties and values that the normal state doesn't have so it moves as the new properties are applied. Let the color be the only difference if you don't want it to move.
li.item-8 a {
background-image: url("../images/menu/top-panel-login-bg1.png") !important;
background-position: center center !important;
background-repeat: no-repeat !important;
margin-left: -3px;
margin-top: -8px;
width: 114px;
}
li.item-8 a:hover {
background-image: url("../images/menu/top-panel-login-bg1.png") !important;
background-position: center center !important;
background-repeat: no-repeat !important;
color: hsl(0, 1%, 25%);
margin-left: -3px;
margin-top: -8px;
width: 114px;
}
<ul>
<li class="item-8">One</li>
<li class="item-8">One</li>
<li class="item-8">One</li>
<li class="item-8">One</li>
</ul>

Answer 3

Thanks #Sathish S I used the moving of the elements but then just placed the padding in a different location and that worked.
#top_login_panel ul.menu_topPanel li.item-8 a {
display: block;
font-size: 12px;
margin-left: -3px;
margin-top: -12px;
width: 114px;
}
#top_login_panel ul.menu_topPanel li.item-8 a:hover {
background-image: url("../images/menu/top-panel-login-bg1.png") !important;
background-position: center center !important;
background-repeat: no-repeat !important;
color: hsl(0, 1%, 25%);
}
#top_login_panel ul.menu_topPanel li.item-8 a {
padding: 31px 0 0 35px;
}