While utilizing the ZURB Foundation Topbar, I have encountered a bug that I find frustrating. When navigating the 2nd level drop downs and clicking on a link (li elements), the active highlight flickers to one of the elements above before taking you to the page you clicked on.
---[The reason for this flickering is because the 1st level dropdown is being selected first, causing it to briefly switch to the previous level drop down and then back to the 2nd level choice]---Unfortunately, I still have no idea how to fix this issue.
<!-- Nav Section Mobile-->
<div class="top-bar-container hide-for-large-up">
<nav class="top-bar">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Nav Section -->
<ul class="">
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class="has-dropdown"><a href="#">pages</a>
<ul class="dropdown">
<li class="divider hide-for-small"></li>
<li><a href="/page.html" >page</a></li>
<li><a href="/page.html" >page</a></li>
<li><a href="/page.html">page</a></li>
<li><a href="/page.html">page</a></li>
<li><a href="/page.html">page</a></li>
<li><a href="/page.html">page</a></li>
</ul>
<li class="divider hide-for-small"></li>
<li class="has-dropdown"><a href="#">More</a>
<ul class="dropdown">
<li class="divider hide-for-small"></li>
<li><a href="/page.html">page</a></li>
<li><a href="/page.html">page</a></li>
<li><a href="/page.html">page</a></li>
</ul>
<li class="divider hide-for-small"></li>
</ul>
</section>
</nav>
</div>