Question

我使用suckerfish创建了一个CSS下拉菜单。它的问题是当您单击将您带到类别页面的顶级导航项时，指针仍然在该导航项上，并且下拉菜单会自动显示在IE中。

对于Firefox来说这很好，因为直到我移动鼠标才会出现下拉列表，但IE只是直接踢开而没有任何鼠标移动。

由于菜单非常大，用户不知道页面已经改变了。

此网站http://www.foodnetwork.com/似乎达到了我想要的效果，但在下拉列表再次出现之前稍有延迟。我知道他们正在将它与JS和CSS混合在一起，但无法弄清楚他们在做什么。

任何想法

Answer 1

我知道你目前正在使用不同的技术解决方案解决这个问题，但在你判断之前，请至少看看我的建议。我不够好，无法直接解释，所以我只会给你一些要点，然后链接到解决方案以帮助你。

此解决方案包含以下属性：

没有使用任何类型的客户端脚本（Javascript）
绝对的浏览器和平台兼容性
文字缩放友好
窄窗宽度处理
适用于非CSS或CSS禁用的浏览器
置于公共领域

发布文件的站点使用此菜单（它由作者拥有）。因此，请访问此GRC's Script-Free Pure-CSS Menuing System页面。

我真的希望这可以帮助你!!

Answer 2

使用jQuery的hoverIntent来实现延迟效果。此外，即使光标暂时移出菜单，菜单也会停留在那里。防止分散菜单的闪烁效果出现和消失。

Answer 3

把它扔到那里，因为可能有其他更改你希望菜单也有：

您可能需要考虑Superfish（更新/升级[并且可能看起来太过于难以理解] Suckerfish版本），其中一个补充是菜单上的delay option。

Answer 4

所以我得到了解决方案。

我在文档的头部添加了带有JS的CSS，并在其上设置了一个小延迟。这样，当用户单击主导航链接时，默认情况下会使用CSS隐藏下拉列表，然后使用JS编写的CSS显示下拉列表。用户在页面加载时看到没有破坏的页面，然后在1.5秒后出现下拉列表，从而向用户显示重新加载的页面。

// Add dropdown styles
        function addDDStyles() {
            var head = document.getElementsByTagName('head')[0];
            var logindiv = document.createElement('link');
            logindiv.setAttribute('type', 'text/css')
            logindiv.setAttribute("rel", "stylesheet");
            logindiv.setAttribute("href", 'http://files.stv.claw/css/dropdown.css');
            logindiv.setAttribute("media", "screen");
            head.appendChild(logindiv);
        }
        setTimeout('addDDStyles()', 1500)

IE中的CSS下拉过快出现

4 个答案: