Question

我一直在努力研究一个超级鱼导航菜单，只需要一些自定义工作，但由于某些原因，事情无法正常工作。

出于某种原因，小提琴下拉不会隐藏，尽管这可以在桌面上使用。

问题是在悬停状态下，下拉看起来很有趣，不会垂直下降，而是水平打开。

<nav id="menu">

    <ul id="test">
    <li><a href="#">Test 1</a>

        <ul>
    <li><a href="#">Drop 1</a></li>
        <li><a href="#">Drop 1</a></li>
    <li><a href="#">Drop 1</a></li>
    <li><a href="#">Drop 1</a></li>
</ul>

    </li> 
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 1</a></li>
        </ul>

</nav>

Answer 1

到你的CSS，我添加了这个，它显示/隐藏相应的下拉列表。把它添加到底部。

ul ul {display:none !important; }
ul li:hover ul{display:block !important; }

希望对你有用。

编辑：好的，检查小提琴。它应该工作。您可以根据需要应用CSS。 http://jsfiddle.net/somdow/mH32X/

编辑3：好的，检查小提琴： http://jsfiddle.net/somdow/mH32X/

这在给定的宽度上，隐藏了超级鱼菜单，并显示另一个菜单，您可以在其中构建通常出现在移动站点中的切换，这些切换从侧面加载等。

你可以这样做，或者你必须写一些jQuery / Javascript。像。的东西。

伪代码：

var x = the screens width
if(screen.width < x ){
//go to the menus "nav" tag and remove the sf-menu class
}

这将做同样的事情，但我不会推荐它，因为sf菜单绑定所有的动画和样式等。删除这样的类将删除一切。你必须编写单独的CSS来支持两个菜单，这将变成更多的代码。我建议坚持使用媒体查询。

css superfish菜单，没有正确排队

1 个答案: