The top menu bar on my website has a second level dropdown that is functioning correctly in Firefox but not in Chrome.
In Chrome, when I mouse out of the dropdown, the background color disappears before the links. This creates a slight timing gap between the disappearance of the color and the links.
Below is the code snippet for the menu:
<nav class="top_menu">
<ul class="show-for-medium-up">
<li class="first active"><a href="index.php">Home</a></li>
<li><a href="weddings.php">About Us</a></li>
<li class="rev has_dropdown"><a href="wedding-services.php">wedding services</a>
<ul class="dropdown">
<li class="first"><a href="#">wedding decor</a></li>
<li><a href="#">lights & drapping</a></li>
<li><a href="#">linen</a></li>
<li><a href="#">catering</a></li>
<li><a href="#">transport</a></li>
</ul>
</li>
<li class="last"><a href="contact.php">contact us</a></li>
</ul>
</nav>
Demo: http://jsfiddle.net/squidraj/71f15Lc6/
The menu functions properly in Firefox. Any assistance to resolve this issue in Chrome would be greatly appreciated. Thank you in advance.