Onclick jquery drop down menu hides on mouseout

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.

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.

Here is my 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); }
   );
       });
    };

Here is my HTML:

<ul id="mylinksdd" class="mylinksdd">
        <li>
            <SPAN style="font-weight:bold; cursor:default">Quick Links</SPAN>
            <ul>
            <li><iframe id="quicklinksframe" frameborder="0" class="autoHeight" width="250" src=""></iframe></li>
            </ul>
        </li>
</ul>

My CSS:

/* 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;
}

Any help is greatly appreciated. Thanks, Dave

---

Hopefully this isn't too confusing but without markup to go with this JS, I can't really provide working example...

I've had this happen to me. It's happening because the child nodes inside the node with the mouseout trigger are causing the mouseout to fire. I've used a variable to hold a setTimeout to delay firing the hide method (in your case, the removeClass). I'd also add a mouseover listener to the children that would clear the timeout (if it exists) which would prevent the mouseout from executing. You wouldn't need anything more because when you exit the child, you enter the parent and if you then exit the parent, the hide routine would execute as normal. The delay simply buys you some time to check to see if the mouseout should fire.

If you can post the markup and css (jsfiddle), I'd be more than happy to prototype it out.