How do I keep JQuery Cycle Fade images behind other elements?

How do I keep JQuery Cycle Fade images behind other elements?

I am doing a fade cycle on 3 images, and want to put links on top of the fading images so that the fading images are in the bacground, similar to this page.


However, as the images fade the place them selves on top of my menu link, hiding it. How do I force the images to stay in the background as they fade?

Below is a summary of my code. I've attached the whole thing in sp.zip so you can see how it in your browser.

  1. <script type="text/javascript">
  2.             $(document).ready(function() {
  3.                 $('#photo').cycle({
  4.                     fx: 'fade'
  5.                 });
  6.             });
  7.     </script>

  9. <div id="content">
  10.     <div id="photo"><img src="1.jpg" /><img src="2.jpg" /><img src="3.jpg" /></div>
  11.     <div id="menu" style="position: absolute; left: 50px; top: 120px;">
  12.         <ul><li><a href="#">Enter</a></li></ul>
  13.     </div>
  14. </div>