Two independent drop down boxes. One onclick the other on hover
===

This may seem like a simple and straightforward question and it probably has a straightforward answer. I have two drop down boxes in my toolbar, one that drops on hover and the other on click and the other on hover. 

I can't for the life of me figure out how to make them run independently. I am very new to jquery and have scoured the internet before coming here.

Here is the jquery

    $(document).ready(function () { 
     
    $('#discoverDrop').hover(
        function () {
            //show its submenu
            $('ul, this').slideDown(500);
 
        }, 
        function () {
            //hide its submenu
            $('ul, thid').slideUp(500);         
        
    });
     


    $('#profile').toggle(function(){
            $('ul, this').slideDown(500);
        }, function(){
            $('ul, this').slideUp(500);
        });

	
    });


And the neccesary markup

    <span id="discoverDrop">
           <span id="drop"><m2>Discover</m2>
            <ul>
             <li><m2><a href="../artists"><m2>Artists</m2></a></li></m2>
             <li><m2><a href="../tracks"><m2>Tracks</m2></a></li></m2>
             <li><m2><a href="../sessions"><m2>Sessions</m2></a></li></m2>
             <li><m2><a href="../gigs"><m2>Gigs</m2></a></li></m2>
            </ul>         
           </span>
		  </span>
		  
		  <span id="profile">
		    <span id="profileDrop">
			  <ul>
               <li><m2><a href="../phpscripts/logout.php"><m2>Logout</m2></a></li></m2>
               <li><m2><a href="../tracks"><m2>Tracks</m2></a></li></m2>
               <li><m2><a href="../sessions"><m2>Sessions</m2></a></li></m2>
               <li><m2><a href="../gigs"><m2>Gigs</m2></a></li></m2>
            </ul>         
			</span>
		  </span>