CSS 下拉菜单在 IE 中出现太快答案

【问题标题】：CSS dropdown appearing too quickly in IECSS 下拉菜单在 IE 中出现太快
【发布时间】：2010-07-29 11:34:08
【问题描述】：

我使用 Suckerfish 创建了一个 CSS 下拉菜单。问题在于，当您单击将您带到类别页面的顶级导航项时，指针仍位于该导航项上方，并且下拉菜单会自动出现在 IE 中。

它对 Firefox 来说很好，因为在我移动鼠标之前不会出现下拉菜单，但是 IE 会直接启动，根本不需要任何鼠标移动。

由于菜单很大，用户并不知道页面下方发生了变化。

这个网站http://www.foodnetwork.com/ 似乎实现了我想要的，在下拉菜单再次出现之前稍有延迟。我知道他们将其与 JS 和 CSS 混为一谈，但无法完全弄清楚他们在做什么。

任何想法

【问题讨论】：

标签： css drop-down-menu suckerfish

【解决方案1】：

我知道您目前正在使用不同的技术解决方案来解决此问题，但请在判断之前至少先看看我的建议。我不足以直接解释它，所以我只会给你几个要点，然后链接到解决方案以帮助你。

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

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

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

我真的希望这对你有帮助！

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

只是把它扔在那里，因为可能还有其他你希望菜单也有变化：

您可能需要考虑Superfish（Suckerfish 的更新/升级 [可能是过度杀伤，所以请看一下] 版本），其中一个新增功能是菜单上的 delay option。

【讨论】：

啊，是的。 Superfish 使用 hoverIntent :)
感谢您的回复，但我仍然无法使用任一选项。从我可以看到 CSS 在 JS 之前启动，因此用于使子菜单出现的 li:hover 在 JS 隐藏它之前就开始了，并且由于它出现然后隐藏，我得到了导航的乐趣。因此，即使有延迟功能，CSS 始终是第一位的。
您能否编辑您的问题以包含您的代码？我会看看我能做些什么来提供帮助

【解决方案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", '@987654321@');
            logindiv.setAttribute("media", "screen");
            head.appendChild(logindiv);
        }
        setTimeout('addDDStyles()', 1500)

【讨论】：