jquery hover fade in/fade out menu submenu

[nl18663]

Beste mede helpmijers,

ik probeer met jquery een menu submenu structuur te maken, dit is gelukt maar...
hij werkt niet zoals het zou moeten want, als ik over het topic van het menu hover dan krijg ik netjes mijn submenu te zien. ga ik van het menu naar het submenu dan krijg ik een fadeout en een fadein... dat is niet de bedoeling!
nu heb ik al de heledag internet af zitten struinen naar dergelijke problemen en heb van allerhande oplossingen gezien en geprobeert maar, ik ben ten einde raad.
zo dacht ik een oplossing gevonden te hebben met .stop(), dat bracht alleen een ander probleem met zich mee. als ik van menu naam submenu op en neer ging ging de opacity steeds lager tot het verdwenen was en moest ik de pagina herladen.

bij deze mijn code:
jquery:

$(document).ready(function(){
		var config = {
			sensitivity: 8, // number = sensitivity threshold (must be 1 or higher)    
     		interval: 300, // number = milliseconds for onMouseOver polling interval    
     		over: makeTall, // function = onMouseOver callback (REQUIRED)    
     		timeout: 700, // number = milliseconds delay before onMouseOut    
     		out: makeShort // function = onMouseOut callback (REQUIRED)	
		};
		$("#center").load('body.php');
		$("#nav_webservices, #nav_menu_services").hoverIntent (setVisibleWebServices, setHiddenWebServices);
		$("#nav_productfoto, #nav_menu_productfoto").hoverIntent (setVisibleProductfoto, setHiddenProductfoto);
		$("#nav_overons, #nav_menu_overons").hoverIntent (setVisibleOverOns, setHiddenOverOns);
});
function makeTall(){};
function makeShort(){};
function setVisibleWebServices() {
	/*$('ul#nav_menu_services').css ('visibility','visible');*/
	$("ul#nav_menu_services").fadeIn ("slow");
}
function setHiddenWebServices() {
	/*$('ul#nav_menu_webservices').css ('visibility','hidden');*/
	$("ul#nav_menu_webservices").fadeOut ("slow");
}
function setVisibleProductfoto() {
	$('ul#nav_menu_productfoto').fadeIn ("slow");	
}
function setHiddenProductfoto() {
	$('ul#nav_menu_productfoto').fadeOut ("slow");
}	   
function setVisibleOverOns() {
	$('ul#nav_menu_overons').fadeIn ("slow");	
}
function setHiddenOverOns() {
	$('ul#nav_menu_overons').fadeOut ("slow");
}

de Html en CSS:

html {
	font: small1/1.4 "Tahoma", "Geneva", "sans-serif";
}
body {
	height: 100%;
	font-size: 80%;
}

#header {
	/*positioning: absolute;*/
	width: 970px;
	height: 150px;
	background: #D9E4E6 url(../images/E-motion-web.png) no-repeat;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
}

#topmenu {
	position: absolute;
	width: 680px;
	height: 20px;
	background: #C60F0F;
	margin-left: 290px;
	margin-top: 68px;
	color: #D9E4E6; /* text color */
}

#container {
	width: 990px;
	height: 100%;
}

#left {
	float:left;
	width: 277px;
	height: 100%;
	background: #D9E4E6;
	margin-top: 20px;
	margin-left: 10px;
	text-align: justify;
}

#center {
	float: right;
	width: 663px;
	height: 100%;
	background: #D9E4E6;
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 10px;
	margin-bottom: 20px;
	padding-left: 10px;
}

#topmenu ul, #topmenu il {
	margin: 0;
	padding: 0;
}

#topmenu ul {
	list-style-type: none;	
}

#topmenu li {
	display: block; /* om clickveld te vergroten */	
	background: #C60F0F; /* achtergrond kleur menu */
	width: 140px;
	height: 20px;
	margin: 0 5px 0 0;
	padding: 0;
}

#topmenu a {
	display: block;
	color: #D9E4E6; /* text color */
	margin: 0;
	padding: 0 3px;
	text-decoration: none;	
}

#topmenu a:link, #topmenu a:visited {
	font-family: Tahoma, Geneva, sans-serif;
	color: #D9E4E6;
	text-decoration: none;	
}

#topmenu a:hover {
	background: #900F0F;
	opacity: 1;
}

ul.horizontaal_menu li {
		float: left;
}

ul.menu_vert {
	position: absolute;
	top: 20px;
	display: none;
	opacity: 1;
}

ul#nav_menu_top 		{ left: 0px  }
ul#nav_menu_services { left: 145px }
ul#nav_menu_productfoto { left: 290px }
ul#nav_menu_overons 	{ left: 435px }

#nav_menu_top li.current a {
	background: #FF0F0F;
	font-weight: bold;
}


#footer {
	clear:both;
	background: #D9E4E6;
	text-align:center;
	margin-left: 10px;
	margin-right: 10px;
}
-->
</style>
<script src="../javascripts/jquery-1.4.js" type="text/javascript"></script>
<script src="../javascripts/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="../javascripts/script.js" type="text/javascript"></script>

</head>

<body id="">
<div id="container">
	<div id="header"><div id="topmenu">
    <ul id="nav_menu_top" class="horizontaal_menu">
      <li id="nav_home"><a href="#">Home</a></li>
      <li id="nav_services" ><a href="#">services</a></li>
      <li id="nav_productfoto" ><a href="#">Productfoto</a></li>
      <li id="nav_overons" ><a href="#">Over ons</a></li>
    </ul>
    <ul id="nav_menu_webservices" class="menu_vert" >
      <li id="nav_onderhoud"><a href="#">Onderhoud</a></li>
      <li id="nav_watishet"><a href="#">Wat is het</a></li>
    </ul>
    <ul id="nav_menu_productfoto" class="menu_vert" >
      <li id="nav_productfoto"><a href="#">Productfoto</a></li>
      <li id="nav_zelfdoen"><a href="#">Wat kan ik zelf doen</a></li>
    </ul>
    <ul id="nav_menu_overons" class="menu_vert" >
      <li id="nav_wiezijnwij"><a href="#">Wie zijn wij</a></li>
      <li id="nav_contact"><a href="#">Contact</a></li>
   </ul>
    </div></div>
	<div id="center" class="column">

	</div>
    <div id="left" class="column">
   test
    </div>
  <div id="footer"> Powered by© 2009 - </div>
</div>
</body>
</html>

alvast heel erg bedankt!

Hans