ZURB Foundation Topbar Bug，Onclick 突出显示其他链接 Mobile

Question

我正在使用 ZURB Foundation Topbar，除了我发现的一个错误之外，我很喜欢它。在第二级下拉列表中，如果您突出显示然后单击链接（li 元素），然后将您带到您单击的页面，则活动突出显示会轻弹到上述元素之一并返回。

---[它滑动到上述元素之一的原因是因为它是要选择的第一级下拉菜单，由于某种原因它滑动到上一级下拉菜单然后返回第二级选择]-- -仍然不知道如何修复它。

   <!-- 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> 

Answer 1

在 Foundation 4 中存在一个错误，因为伪类与冒号一起使用

:

。它应该是

.

之后的句号

li

:

.top-bar-section ul li:hover > a {

应为：

.top-bar-section ul li.hover > a {

这样就可以解决问题了