Hovering menus where images are used can be tricky. There seems to be a delay sometimes when hovering over the menu item, a split second where the image disappears and there is no menu item being displayed. Then the second image appears. This happens because it takes sometimes to load image (if used different image is used on hover). This can be solved by the using the same image on both states, while hovering and while not hovering.

You can also use some JavaScript to pre-load both images and apply it at runtime but i takes some effort for designers because most of the designers are not aware of the javascript and dont want to use javascript for just hovering issue.

Same functionality can also be implemented with css.

Create a single image which contains background on the top at normal state and background on the bottom at hover state.

On the both class use same image. only difference is positon of the backgorund.

Here is the example below:

.LoginButton
{
background:url('/dot4pro/../images/menu_org.png') top left no-repeat;
display:block;
width:100px;
height:30px;
}
.LoginButton:hover
{
background:url('/dot4pro/../images/menu_org.png') bottom  left no-repeat;
display:block;
width:100px;
height:30px;
}