0

我遇到了与“响应式设计”内联显示的超级鱼菜单的问题我希望内联显示所有超级鱼菜单链接，但我遇到的问题是子菜单的超级鱼会覆盖我尝试过的所有样式并始终显示下拉菜单。

任何人都知道如何在使用小于 700 像素的设备浏览时禁用鼠标悬停时的超级鱼动画下拉菜单并显示超级鱼菜单元素、子菜单和子菜单元素的所有元素内联块。

来自网站的当前代码太乱了，所以我在这里上传了它http://pastebin.com/mwPjVEPX 这直接来自网站。

对于第一个 ul li 元素，我添加了 display:inline-block 并且它可以工作，但是在子菜单元素中，来自 superfish 的第一个 javascript 添加元素样式 display:none 和 visibility:hidden，当我尝试添加 display:inline-block 以覆盖它时第一次悬停它返回显示无。

这是超级鱼菜单的CSS http://pastebin.com/vmYkGVx4

4

3 回答 3

0

尽管有你的 CSS，Superfish JavaScript 仍然可以在小屏幕上运行。JavaScript 通过附加内联style属性来改变 CSS 属性来隐藏和揭示事物display。!important除非您像这样添加关键字，否则内联样式将始终胜过任何其他来源的 CSS display: inline-block !important：. 这将是值得尝试的。但是，由于 JavaScript 仍会尝试对元素进行操作，您可能仍会发现其他奇怪的行为。请让我们知道您的进展情况。

于 2013-03-08T10:18:19.427 回答
0

首先，您没有在这里特别提及您的代码或任何链接。但正如我猜测的那样，您为父元素指定的所有属性都会自动附加到其子元素。所以，如果你给它，display: inline;那么它的所有孩子都会得到它并且表现得好像他们是内联的。所以还是去吧display: inline-block;。在这种情况下，该元素将表现为一个内联元素，但它本身显示为一个块级元素。而且 child 永远不会 inline 。

于 2013-03-07T16:48:32.523 回答
0

好吧，最后我最终使用了 mobilemenu 。这是在选定宽度上隐藏超级鱼菜单并显示下拉选择框的 javascript 代码。从所有搜索来看，使用它是最合理的。superfish 菜单有一些支持触摸设备的开发，但它仍然不支持“响应式设计”，尽管各种博客上都有帖子说下一步是让它响应式，直到我使用这个插件https://github。 com/mattkersley/响应式菜单

于 2013-03-09T12:34:17.043 回答