css superfish 菜单，没有正确排列

Question

我一直在尝试制作一个超级鱼导航菜单，并进行了一些自定义工作，但由于某些原因无法正常工作。

由于某些原因，在 fiddle 上下拉菜单不会隐藏，尽管这适用于桌面。

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

Fiddle Demo

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

在给定宽度上，隐藏 superfish 菜单并显示另一个菜单，您可以在该菜单上构建通常出现在移动网站中的切换，它们从侧面加载等。

您可以这样做，或者您必须编写一些 jQuery/Javascript。类似的东西。

伪代码：

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

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