IE7 / IE8 Non Background Image Flickering

I am currently developing a site that users the jQuery superfish plugin to construct a 3 level deep drop down menu with rounded corners, drop shadows and all of that other head banging, screen smashing, anger inciting stuff us web developers love.

The client is using IE8, and IE7 as well. At the end of each menu, I am placing a 24bit rounded transparent image at the end for the rounded corners at the bottom of the menu. So my code is as follows:

<ul id="nav">
 <li><a href="#"开发者_如何学运维>Item one</a></li>
 <li><a href="#">Item one</a></li>
 <li><a href="#">Item one</a></li>
 <li>
  <a href="#">Item one</a>
  <ul>
   <li>
    <a href="#">Another item</a>
   </li>
   <li class="lastli2"><img src="images/lastli2.png" /></li>
  </ul>
 </li>
 <li class="lastli"><img src="images/lastli.png" /></li>
</ul>

As you can see I am not using background images on the last elements as they are just images inside of LI elements. When hovering in IE7 and IE8 (I presume IE6 as well) you see a flicker of the last image like it is loading or something. I've tried preloading the images, but that doesn't seem to make a difference whatsoever. If the image is in the markup it should be loading anyway.

So my question is, how can I stop an image flickering in my nav that isn't a background image? It's almost like it could be a transparency thing as well, but I wouldn't even know where to start.

**** Update ****

I solved the issue. It was the fade effect on the menu that was causing the lag. I removed the FX and the issue was solved. Thank you to all those who helped.

Make them a background image and possibly even combine them in the same transparent PNG. Then just apply the bg image to those elements, specify width/height and overflow hidden possibly to cut it off. Specify a background-position per each, and you should be good.

I discovered the cause of this issue and update my question to reflect the answer.