title: jquery show hide div on hover and retain visibility until mouseout
body: <p>I have select language drop down menu.</p>
  
  <p>When the Flag is hovered it should display the language options and remain showed. When the mouse leaves the language options or when the flag is hovered again the language options should be hidden. I tried but it is showing and hiding instantly.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;a href="" class="lang"&gt;&lt;img src="images/english.jpg" alt="en" id="langflag"&gt;&lt;/a&gt;
          &lt;div class="select-lang" style="display:none;"&gt;
                &lt;h2&gt;In Your Language&lt;/h2&gt;
                 &lt;ul&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/in_14.png" alt="in"&gt; हिन्दी   &lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/es_14.png" alt="es"&gt; Español&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/fr_14.png" alt="fr"&gt; Français&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/de_14.png" alt="de"&gt; Deutsch&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/ro_14.png" alt="ro"&gt; Română&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/br_14.png" alt="br"&gt; Brasil&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/tr_14.png" alt="tr"&gt; Türkçe&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/pl_14.png" alt="pl"&gt; Polski&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/pt_14.png" alt="pt"&gt; Português&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/ru_14.png" alt="ru"&gt; Русский&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/jp_14.png" alt="jp"&gt; 日本語&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/it_14.png" alt="it"&gt; Italiano&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/hu_14.png" alt="hu"&gt; Magyar&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/se_14.png" alt="se"&gt; Svenska&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/kr_14.png" alt="kr"&gt; 한국어&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/cn_14.png" alt="cn"&gt; 中文&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
               &lt;p&gt;&lt;a href=""&gt;More Languages &amp;rsaquo;&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function() {
  $( "#langflag" ).hover(function() {
     $( ".select-lang" ).slideToggle( 400, function() {
         // Animation complete.
      });
  });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/xRLxs/2/" rel="nofollow">Fiddle</a> here.</p>