Like so...

1. ( function ($ ) {
       $. fn. dropDown = function (options ) {
           var defaults = {
               menu: ''
           },
           settings = $. extend ( { },defaults, options );
           return this. each ( function ( ) {
               var $this= $ ( this );
               $this. hover ( function ( ) {
                   $ (settings. menu ). stop ( true, true ). fadeIn ( 200 ); 
               }, function ( ) { 
                   $ (settings. menu ). stop ( true, true ). fadeOut ( 100 ) ( );
                  
               } );
           } );
       }
   } ) (jQuery );
    
   $ ( function ( ) {
       $ ( 'li#sub-one' ). dropDown ( {menu: '#guitar-course' } );
       $ ( 'li#sub-two' ). dropDown ( {menu: '#bass-course' } );
       $ ( 'li#sub-three' ). dropDown ( {menu: '#drum-course' } );
       $ ( 'li#sub-four' ). dropDown ( {menu: '#vocal-course' } );
       $ ( 'li#sub-five' ). dropDown ( {menu: '#song-course' } );
       $ ( 'li#sub-six' ). dropDown ( {menu: '#specialist-course' } );
      
   } );
   
   

I need it to appear when you click though rather than hover, the problem being when you click it stays there and i need it to obviously disappear when you click on another link and not get caught in a que..

I've managed to find this which seems to do what i'm after perfectly apart from one flaw... 

1. $ (document ). ready ( function ( ) {
           var hide = false;
           // Shows the DIV on hover with a fade in
           $ ( "li#sub-one a" ). click ( function ( ) {         
              if (hide ) clearTimeout (hide );
               $ ( "#guitar-course" ). fadeIn ( );
               // The main nav menu item is assigned the 'active' CSS class
               $ ( this ). addClass ( "active" );
           }, function ( ) {
               // Fades out the DIV and removes the 'active' class from the main nav menu item
               hide = setTimeout ( function ( ) {$ ( "#guitar-course" ). fadeOut ( "fast" ); } );
               $ ( "li#sub-one a" ). removeClass ( "active" );
           } );
           // Ensures the DIV displays when your mouse moves away from the main nav menu item
           $ ( "#guitar-course" ). hover ( function ( ) {
               if (hide ) clearTimeout (hide );
               $ ( "li#sub-one a" ). addClass ( "active" );
           }, function ( ) {
               // If your mouse moves out of the displayed hidden DIV, the DIv fades out and removes the 'active' class
               hide = setTimeout ( function ( ) {$ ( "#guitar-course" ). fadeOut ( "fast" ); } );
               $ ( "#guitar-course" ). stop ( ). fadeIn ( );
               $ ( "li#sub-one a" ). removeClass ( "active" );
           } );
          
                
       } );

After you've left the li#sub-one a link the menu layer below stays there. 

The layer itself only disappears once you move the mouse into layer and out. 

Meaning if you have a range of navigation each with its own click to show layer, that if you click show layer and DONT move into the layer, you move onto the next link instead, they back up and que, still showing the existing layer...  and basically crashes and s un-usable.

Anyone be a big help and give me some advice to fix this...?