I have a simple CSS menu with two images, one image is the primary display image and the other is the image that is used to give a colour change on hover.

The problem is in a lot of browsers, (Firefox mostly and IE), the hover image delays loading and the image does not appear instantly, leaving the menu a blank white space for about half a second and looks very buggy.

How can I fix this without Javascript?

Can I pre-load the images with css or do I need Java-script and if I do can I just pre-load the images with JS, then leave the rest to css?