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.

HTML Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<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">
		 // drop down menu
			function() { $('ul', this).css('display', 'block'); },
			function() { $('ul', this).css('display', 'none'); 
		// make sure slides stay hidden
		$(".slides").css("overflow" , "hidden");
		// jquery cycle plugin
			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();


	<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>
                    <li><a href="#">Development</a></li>
                    <li><a href="#">Managment</a></li>
                    <li><a href="#/">Design</a></li>
          <li class = "menu-item"><a href="#">Portfolio</a></li>
            <li class = "menu-item"><a href="#">Resources >></a>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Tutorials</a></li>
                    <li><a href="#/">Downloads</a></li>
                    <li><a href="#">Documentation</a></li>
            <li class = "menu-item"><a href="#">Contact</a></li>
	  <div id = "slide-wrapper">
	  	<ul class = "controls">
			<li class = "prev"><a href="#">Previous</a></li>
			<li class = "next"><a href="#">Next</a></li>
	  	<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>