title: Onclick jquery drop down menu hides on mouseout
body: <p>I have an existng jquery dropdown menu I am trying to retrofit to make on click rather than hover and once it is clicked I would like to use jquery to add the src attribute to the iframe I have in the drop down.</p>
  
  <p>However, I am having trouble coding for the timeout and mouseout formerly handled by the hover function.  Essentially, what it is doing is when I click the menu it opens it, but when I try to move the cursor to the menu that I just expanded it closes.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>     $(document).ready(function(){
      $("#mylinksdd li").hover(
            function(){ $("ul", this).fadeIn("fast"); }
       );
       if (document.all) {
           $("#mylinksdd li").hoverClass ("sfHover");
       }
    });        
     $.fn.hoverClass = function(c) {
         return this.each(function(){
           $(this).click( 
               function() { $(this).addClass(c);  }
           );
     $(this).mouseout(
      function() { $(this).removeClass(c); }
     );
         });
      };
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;ul id="mylinksdd" class="mylinksdd"&gt;
          &lt;li&gt;
              &lt;SPAN style="font-weight:bold; cursor:default"&gt;Quick Links&lt;/SPAN&gt;
              &lt;ul&gt;
              &lt;li&gt;&lt;iframe id="quicklinksframe" frameborder="0" class="autoHeight" width="250" src=""&gt;&lt;/iframe&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>/* mylinksdd */
  .mylinksdd, .mylinksdd ul { 
  
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .mylinksdd {
    z-index: 100;
    position: relative;
  }
  .mylinksdd li {
  
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .mylinksdd li a, .mylinksdd li a:link, .mylinksdd li a:active, .mylinksdd li a:visited {
  color: #1a508e;
    display: block;
    padding: 0 0px;
  }
  
  .mylinksdd ul {
    background: #eee;
    border: 1px solid black;
    border-top: 6px solid #3c1e4c;
    list-style: none;
    margin: 0;
    width: 75px;
    position: absolute;
    top: -999em;
    left: -20px;
    right: -20px;
    padding: 5px;
    color: #1a508e;
  }
  .mylinksdd li:hover ul,
  .mylinksdd li.sfHover ul {
    top: 16px;
  }
  .mylinksdd ul li {
  color: #1a508e;
    border: 0;
    float: none;
  }
  </code></pre>
  
  <p>Any help is greatly appreciated.
  Thanks,
  Dave</p>