【发布时间】：2013-09-06 04:03:33
【问题描述】：
我正在 Drupal 7 中构建一个基于 Zen 7.x-5.x 的响应式主题的站点。我已经根据此处的说明使用媒体查询成功地设置了小屏幕菜单的样式：
说明：http://webdesignerwall.com/tutorials/css-responsive-navigation-menu
演示：http://webdesignerwall.com/demo/responsive-menu/
我现在唯一的问题是在演示中适用于该站点的 ul:hover{} 在我的 Drupal 站点上不起作用。当我通过移动设备访问该网站时，点击菜单确实会展开它，但它也会立即选择第一项。
我有一种感觉，这是因为他们使用标签来包围他们的而不是 ，但我不确定我是否可以在主题中更改它。
我应该如何处理？最好不使用 javascript，但如果反馈绝大多数是“使用 javascript”，我很乐意倾听。
【问题讨论】：
-
我认为 drupal 的 css 主题为所有 ul li 元素添加了一些默认样式。您需要检查它并在 .nav 中设置为默认值 ...
-
谢谢，你能给我一些关于控制手机悬停行为的设置的线索吗？
-
我在 CSS 方面找不到任何东西 - 但你说得对，存在差异。我的 drupal 页面有一堆事件侦听器，我想我毕竟必须进入 javascript /sigh
-
我认为移动设备上没有悬停状态，因为它喜欢鼠标悬停。您需要创建另一个 css 类并通过单击将其设置为 ul。 jQuery - $(".nav").click(function(){ $(this).addClass(".hovered");});并在 css 中复制此类：.nav ul:hover to .hovered; .nav ul:hover li 到 .hovered li; .nav ul:hover .current 到 .hovered .current
-
感谢 Artem，我可能最终会实施第三方脚本，这开始让我难以理解 =) 感谢您的意见。
标签： css mobile drupal-7 hover zen