我使用的是 ZURB Foundation Topbar,我喜欢它,除了我发现的一个错误。在第 2 级下拉列表中,如果您突出显示然后单击链接(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>
最佳答案
在 Foundation 4 中存在一个错误,因为伪类与冒号 :
一起使用。在li
之后应该是句号.
:
.top-bar-section ul li:hover > a {
它应该是:
.top-bar-section ul li.hover > a {
这样就可以解决
关于css - ZURB Foundation Topbar Bug,Onclick 突出显示其他链接 Mobile,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21188493/