Two independent drop down boxes. One onclick the other on hover
<p>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. </p>

<p>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.</p>

<p>Fiddle without css but still does same thing.</p>

<p><a href="http://jsfiddle.net/GQtuH/" rel="nofollow">http://jsfiddle.net/GQtuH/</a></p>

<p>Here is the jquery</p>

<pre><code>$(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);
    });


});
</code></pre>

<p>And the neccesary markup</p>

<pre><code>&lt;span id="discoverDrop"&gt;
       &lt;span id="drop"&gt;&lt;m2&gt;Discover&lt;/m2&gt;
        &lt;ul&gt;
         &lt;li&gt;&lt;m2&gt;&lt;a href="../artists"&gt;&lt;m2&gt;Artists&lt;/m2&gt;&lt;/a&gt;&lt;/li&gt;&lt;/m2&gt;
         &lt;li&gt;&lt;m2&gt;&lt;a href="../tracks"&gt;&lt;m2&gt;Tracks&lt;/m2&gt;&lt;/a&gt;&lt;/li&gt;&lt;/m2&gt;
         &lt;li&gt;&lt;m2&gt;&lt;a href="../sessions"&gt;&lt;m2&gt;Sessions&lt;/m2&gt;&lt;/a&gt;&lt;/li&gt;&lt;/m2&gt;
         &lt;li&gt;&lt;m2&gt;&lt;a href="../gigs"&gt;&lt;m2&gt;Gigs&lt;/m2&gt;&lt;/a&gt;&lt;/li&gt;&lt;/m2&gt;
        &lt;/ul&gt;         
       &lt;/span&gt;
      &lt;/span&gt;

      &lt;span id="profile"&gt;
        &lt;span id="profileDrop"&gt;
          &lt;ul&gt;
           &lt;li&gt;&lt;m2&gt;&lt;a href="../phpscripts/logout.php"&gt;&lt;m2&gt;Logout&lt;/m2&gt;&lt;/a&gt;&lt;/li&gt;&lt;/m2&gt;
           &lt;li&gt;&lt;m2&gt;&lt;a href="../tracks"&gt;&lt;m2&gt;Tracks&lt;/m2&gt;&lt;/a&gt;&lt;/li&gt;&lt;/m2&gt;
           &lt;li&gt;&lt;m2&gt;&lt;a href="../sessions"&gt;&lt;m2&gt;Sessions&lt;/m2&gt;&lt;/a&gt;&lt;/li&gt;&lt;/m2&gt;
           &lt;li&gt;&lt;m2&gt;&lt;a href="../gigs"&gt;&lt;m2&gt;Gigs&lt;/m2&gt;&lt;/a&gt;&lt;/li&gt;&lt;/m2&gt;
        &lt;/ul&gt;         
        &lt;/span&gt;
      &lt;/span&gt;
</code></pre>
