Fade-out on mouseout, not on hover

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>

Solution

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><a href="yep">yep</a>
        <ul class="sub-menu" style="display: none;">
            <li><a href="derp">derp</a></li>
            <li><a href="yerp">yerp</a></li>
        </ul>
    </li>
</ul>