Jquery slider next prev help

JavaScript
1

i have a jquery slider i have created with jquery and the jquery cycle plugin but the problem is not the cycle plugin but the simple fadein fadeout functions of the slider controls witch i built with jquery.

head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RoseCityDevelopment</title>

<link rel="stylesheet" type="text/css" media="all" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css"/>

<script src="js/jQuery.js"></script>
<script src ="js/slider.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		
		 // drop down menu
		$('.menu-item').hover(
			function() { $('ul', this).css('display', 'block'); },
			function() { $('ul', this).css('display', 'none'); 
		});
		
		// make sure slides stay hidden
		$(".slides").css("overflow" , "hidden");
		
		// jquery cycle plugin
		$(".slides").cycle({
			fx: 'fade',
			pause: 1,
			prev: '.prev',
			next: '.next',
		})
	
		//slider controls and current buggy code
		$(".slides a").hover(
			function() { $(".controls a").fadeIn(); },
		    function() { $(".controls a").fadeOut();
		});
		
		
		
	});

</script>

</head>
<body>
	<div id = "wrapper">
    	<a href = "index.html"><img class="logo" src="img/logo.png"/></a>
        <ul id = "nav">
			<li class = "menu-item"><a href="">Home</a></li>
	  		<li class = "menu-item"><a href="">Solutions >></a>
                <ul>
                    <li><a href="#">Development</a></li>
                    <li><a href="#">Managment</a></li>
                    <li><a href="#/">Design</a></li>
                </ul>
 			</li>
          <li class = "menu-item"><a href="#">Portfolio</a></li>
            <li class = "menu-item"><a href="#">Resources >></a>
            	<ul>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Tutorials</a></li>
                    <li><a href="#/">Downloads</a></li>
                    <li><a href="#">Documentation</a></li>
                </ul>
            </li>
            <li class = "menu-item"><a href="#">Contact</a></li>
	  </ul>
	  
	  <div id = "slide-wrapper">
	  	<ul class = "controls">
			<li class = "prev"><a href="#">Previous</a></li>
			<li class = "next"><a href="#">Next</a></li>
		</ul>
	  	<div class = "slides">
			<a href="#"><img class = "slide" src="img/slide1.png"/></a>
			<a href="#"><img class = "slide" src="img/slide2.png"/></a>
			<a href="#"><img class = "slide" src="img/slide1.png"/></a>
		</div>
	  </div>
      
      

        
        
        
</div>
</body>
</html>