Topic: Menu bar jumped by mouse hover

hi, there. I have the flowing problem.
I have created a new menu bar on my side, but allways i go with the mouse over it, it jumped out.

Here is my url: http://wordpress-free-templates.blogspot.com/

Here is the html code:
<div id='topbar'>
<a class='active' href='p1.html'><span>Home</span></a>
<a href='p2.html'><span>News</span></a>
<a href='p3.html'><span>Video</span></a>
<a href='p4.html'><span>Images</span></a>
</div>

And here the css:
#topbar{
font-size:14px;
color:#3b5d14;
background:#b2d281;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
}
#topbar a{
color:#3b5d14;
text-decoration:none;
margin:0 10px;
height:23px;
line-height:23px;
float:left;
display:block;
}
#topbar a.active{
height:23px;
line-height:23px;
background:url(http://i39.tinypic.com/flv79k.png) right top no-repeat;
padding-right:10px;
}
#topbar a.active span{
background:url(http://i40.tinypic.com/2yoz902.png) left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}
#topbar a:hover {
height:23px;
line-height:23px;
background:url(http://i39.tinypic.com/flv79k.png) right top no-repeat;
padding-right:10px;
}
#topbar a:hover span{
background:url(http://i40.tinypic.com/2yoz902.png) left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}

Re: Menu bar jumped by mouse hover

The reason your menu is jumping about is that the <a> elements need more space when you hover over them, and less when you don't. In addition your :active and :hover pseudo-classes add a padding to <a>.

To avoid this you need to give "#topbar a" a fixed width as well as the same padding you gave to the pseudo-classes:

#topbar a
{
  width: 50px;
  padding-right: 10px;
}

By adding the above to your CSS I could get the menu to stop jumping about, but it may not be the exact visual effect you were going for so some fine tuning may well be necessary wink