title: Weird behaviour of CSS Dropdown menu
body: <p>Please take a look at this <a href="http://jsfiddle.net/kLzWv/" rel="nofollow">link</a>. By hovering over the 'menu', the drop down menu will show, and it pause. Now I try to changing the menu to a <code>TD</code> element and assign an image to this <code>TD</code> element and while hovering over this image, it will change image and will show drop down. Please refer to the code below:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  li.li_class{
      display: block;
  }
  
  ul.dropDown{
      margin:0px;
      padding:0px;
  }
  #clickable_div {width:166px; background-color:#9c9c9c;display:block;}
  
  #nav_menu{width:166px; height:auto; background-color:#CCC;z-index: 99999; display: none;position: absolute;}
  
  #wrap{ width:166px;}
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;img src="images/ori_12.png"&gt;
              &lt;/td&gt;
              &lt;td id='testable'&gt;
                  &lt;div id='wrap'&gt;
                      &lt;img src="images/ori_14.png"&gt;
                      &lt;div id="nav_menu"&gt;
                          &lt;ul class="dropDown"&gt;
                              &lt;li class="li_class"&gt;&lt;img src="images/ori_12.png"&gt;&lt;/li&gt;
                              &lt;li class="li_class"&gt;&lt;img src="images/ori_14.png"&gt;&lt;/li&gt;
                              &lt;li class="li_class"&gt;&lt;img src="images/ori_15.png"&gt;&lt;/li&gt;
                              &lt;li class="li_class"&gt;&lt;img src="images/ori_16.png"&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  abc
              &lt;/td&gt;
              &lt;td&gt;
                  def
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;script&gt;
          $('#testable img')
          .mouseenter(function () {
              this.src = this.src.replace('/ori_', '/hover_');
              $('#nav_menu').stop(true, true).slideDown();
          })
          .mouseleave(function () {
              this.src = this.src.replace('/hover_', '/ori_');
              $('#nav_menu').stop(true, true).slideUp();
          });
  
  
  
          $('#nav_menu li img')
          .mouseover(function () {
              this.src = this.src.replace('/ori_', '/hover_');
          })
          .mouseout(function () {
              this.src = this.src.replace('/hover_', '/ori_');
          });
  
      &lt;/script&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>When I hover over the image, the image does get replaced and drop down menu does slide down, however, I just couldn't hover over the dropdownlist item as the dropdown menu slide up immediately.</p>