Fade-out on mouseout, not on hover - hover

Question

I have a menu where I am trying to make the sub-menu fade in on mouseover, and fade out on mouseleave. I have tried several solutions, most of them resulting in the menu fading out immediately on hover, and not on mouseleave/mouseout.
The code below is the one I believe makes the most sense. But the result is that the menu fades in, but doesn't fade out.
<script type="text/javascript">
$(document).ready(function(){
//When hovering a top-level link, submenu fadein.
$('.toppunkt a').mouseenter(function(){
$('ul.sub-menu').fadeIn();
});
//When leaving the submenu, fadeout.
$('.ul.sub-menu').mouseleave(function(){
$('ul.sub-menu').fadeOut();
});
});
</script>

Answer 1

This may or may not help you but you seem to be checking the wrong item on mouseleave...
http://jsfiddle.net/Mutmatt/3ppr8/14/
Even better, the way that you PROBABLY want this menu system to behave is like this jsfiddle:
http://jsfiddle.net/Mutmatt/3ppr8/23/
Take a look at that one. Don't forget to mark correct answers for future reference
Code:
JS:
jQuery(document).ready(function() {
jQuery('#topmenu li').hover(
//When hovering a top-level link, submenu fadein.
function() {
jQuery('ul', this).stop().fadeIn();
},
//When leaving the submenu, fadeout.
function() {
jQuery('ul', this).stop().fadeOut();
}
);
});​
HTML:
<ul id="topmenu">
<li>yep
<ul class="sub-menu" style="display: none;">
<li>derp</li>
<li>yerp</li>
</ul>
</li>
</ul>​

Answer 2

Could be the extra '.' in getting the sub-menu in the mouse leave function.
I wrote up a solution using divs.
Here is the fiddle:
http://jsfiddle.net/PAWQr/12/
Hopefully this helps.
HTML:
<div class="toppunkt">
Here is a list
<div class="sub-menu" style="width:70px; border: 1px dotted gray; display: none;">
<ul>
<li>Option1</i>
<li>Option2</i>
</ul>
</div>
</div>
Script:
$(document).ready(function(){
//When hovering a top-level link, submenu fadein.
$('.toppunkt a').mouseenter(function(){
//alert('mouse enter');
$('.sub-menu').fadeIn();
});
//When leaving the submenu, fadeout.
$('.sub-menu').mouseleave(function(){
$('.sub-menu').fadeOut();
});
​});