I am having an issue with my language drop down menu.
When I hover over the flag, the language options should display and stay visible. However, when I move the mouse away from the language options or hover over the flag again, the language options should be hidden. Currently, it is showing and hiding instantly.
Here is the HTML code:
<a href="" class="lang"><img src="images/english.jpg" alt="en" id="langflag"></a>
<div class="select-lang" style="display:none;">
<h2>In Your Language</h2>
<ul>
<li><a href=""><img src="images/in_14.png" alt="in"> हिन्दी </a></li>
<li><a href=""><img src="images/es_14.png" alt="es"> Español</a></li>
<li><a href=""><img src="images/fr_14.png" alt="fr"> Français</a></li>
<li><a href=""><img src="images/de_14.png" alt="de"> Deutsch</a></li>
<li><a href=""><img src="images/ro_14.png" alt="ro"> Română</a></li>
<li><a href=""><img src="images/br_14.png" alt="br"> Brasil...
And here is the jQuery script:
$(document).ready(function() {
$( "#langflag" ).hover(function() {
$( ".select-lang" ).slideToggle( 400, function() {
// Animation complete.
});
});
});