Menu opens but not doesn't close

Menu opens but not doesn't close

I'm trying to make a dropdown menu that opens when an item is clicked but closes when you mouse out of the menu that has dropped down down.

         $(document).ready( function() {
            $("#nav li").click(
               function() { $(this).addClass("sfhover"); }
            );
            $("#nav li ul").mouseout(
               function() { $(this).removeClass("sfhover"); }
            );            
            
         });