Superfish 下拉菜单的 IE

Question

我在一个网站上使用下拉菜单，除了 IE，它们都可以正常工作。

我花了两个小时试图解决这个问题，但我似乎无法解决问题所在。

我正在使用 superfish 作为菜单，一旦您将鼠标移开链接，菜单会在屏幕上停留大约 2-3 秒，并且位置稍有偏差。

我在 ul 上尝试了 css 修复，但它只将其应用于 jquery 下拉列表而不是剩余的实例。

这些图片说明了正在发生的事情；

这里是菜单的css/html；

标记

<div class="main-menu">
    <div class="menu-header">
        <ul id="menu-main" class="menu sf-js-enabled">
            <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
                <a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/">
                Ashton Klein
                <span class="sf-sub-indicator"> »</span>
                </a>
                <ul class="sub-menu" style="visibility: hidden; display: none;">
                    <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49">
                        <a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/about/">
                        About
                        <span class="sf-sub-indicator"> »</span>
                        </a>
                        <ul class="sub-menu" style="visibility: hidden; display: none;">
                            <li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48">
                            <a href="http://wp.ashtonklein.com/ashton-klein/about/who-we-are/">Who we are</a>
                            </li>
                            <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
                            <a href="http://wp.ashtonklein.com/ashton-klein/about/our-vision/">Our Vision</a>
                            </li>
                            <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46">
                            <a href="http://wp.ashtonklein.com/ashton-klein/about/our-commitment/">Our Commitment</a>
                            </li>
                        </ul>
                    </li>
                    <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
                        <a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/opportunities/">
                        Opportunities
                        <span class="sf-sub-indicator"> »</span>
                        </a>
                        <ul class="sub-menu" style="display: none; visibility: hidden;">
                            <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">
                            <a href="http://wp.ashtonklein.com/ashton-klein/opportunities/careers/">Careers</a>
                            </li>
                            <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">
                            <a href="http://wp.ashtonklein.com/ashton-klein/opportunities/franchising/">Franchising</a>
                            </li>
                            <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
                            <a href="http://wp.ashtonklein.com/ashton-klein/opportunities/marketing-opportunities/">Marketing</a>
                            </li>
                        </ul>
                    </li>
                    <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">
                    <a href="http://wp.ashtonklein.com/ashton-klein/newsroom/">Newsroom</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

#header .webmenu .main-menu ul
{
    width:100%;
    height:40px;    
}
#header .webmenu .main-menu ul li
{
    float:left;
    line-height:30px;
    font-family: 'Philosopher', arial, serif;
    font-size:18px;
    height:30px;
    margin:5px 15px 5px 0;
    padding:0 10px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius: 4px;
    position: relative;
    z-index: 20px;
    display:block;
}

#header .webmenu .main-menu ul li.current-menu-item, #header .webmenu .main-menu ul li.current-menu-parent, #header .webmenu .main-menu ul li.current-page-ancestor
{
    background:url('../images/menu_current.png') repeat-x;
}
#header .webmenu .main-menu ul li a
{
    color:#FFF;
    text-decoration:none;
    display:block;
    outline:none;
}
#header .webmenu .main-menu ul li:hover
{
    background:url('../images/menu_current.png') repeat-x;
}
#header .webmenu .main-menu ul li span.sf-sub-indicator
{
    display:block;
    float:right;
    width:6px;
    height:4px;
    background:url('../images/menu_arrow.png') no-repeat right;
    margin-left:10px;
    margin-top:13px;
    text-indent:-9999px;
}

#header .webmenu .main-menu ul li ul.sub-menu
{
    position:absolute;
    display:none;

    /* corners */
    border-radius:0 4px 4px;
    -moz-border-radius:0 4px 4px;
    -webkit-border-radius:0 4px 4px;

    background:#007E63;
    padding:5px;
    height:auto;
    width:200px;
}
#header .webmenu .main-menu ul li:hover ul.sub-menu
{
    display:inherit;
    left:0px;
    top:28px;
}
#header .webmenu .main-menu ul li ul li
{
    display:block;
    float:none;
    background:none;
    margin-right:0;
    padding:0 10px;
    margin:0 0 3px;
}
#header .webmenu .main-menu ul li ul li:hover
{
    background:#333333; 
}
#header .webmenu .main-menu ul li ul li a, #header .webmenu .main-menu ul li ul li a:hover
{
    color:#FFF; 
}

#header .webmenu .main-menu ul li ul li.current-menu-item, #header .webmenu .main-menu ul li ul li.current-menu-parent
{
    background:#333333; 
}
#header .webmenu .main-menu ul li ul li span.sf-sub-indicator
{
    background:url('../images/menu_arrow_sub.png'); background-repeat:no-repeat;
    float:right;
    margin-left:10px;
    width:16px;
    height:16px;
    margin-top:8px;
    text-indent:-9999px;
}

#header .webmenu .main-menu ul li ul.sub-menu li ul.sub-menu
{
    position:absolute;
    left:-999em;

    /* corners */
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;

    background:#007E63;
    padding:5px;
    height:auto;
    width:200px;
}
#header .webmenu .main-menu ul li ul.sub-menu li:hover ul.sub-menu
{
    left:200px;
    top:0;
}

jQuery

$('ul.menu').superfish({ 
        delay:       1000,                            // one second delay on mouseout 
        animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
        speed:       'slow',                          // faster animation speed 
        autoArrows:  true,                           // disable generation of arrow mark-up 
        dropShadows: false                            // disable drop shadows 
     }); 

感谢您提供的任何帮助！

http://www.stylishmedia.co.uk/ak/

这里是测试版的链接

Answer 1

我没有 IE，但不久前我遇到了一个非常相似的问题。我没有梳理你的样式表，但看看是什么为我解决了它： css menu hover "hangs" in chrome & safari

希望对你有帮助。

Answer 2

好的，这需要一段时间才能完全调试，Superfish 的主要问题是，在添加 Superfish 增强功能之前，您的菜单应该可以正常工作，而您的菜单却不是，来自他们自己的文档（我的粗体字）：

Superfish 是一个增强的 Suckerfish 风格的菜单 jQuery 插件，采用现有的纯 CSS 下拉菜单（因此它可以在没有 JavaScript 的情况下优雅地降级）并添加了以下备受追捧的增强功能 p>

原始问题

您延迟生效的原因是因为您没有将 CSS 中的 li.sfHover 规则应用到也使用了 li:hover 的相同位置，例如

#header .webmenu .main-menu ul li:hover,
#header .webmenu .main-menu ul li.sfHover
{
    background:url('http://www.stylishmedia.co.uk/ak/wp-content/themes/AshtonKlein/library/images/menu_current.png') repeat-x;
}

在每个调用 li:hover 的地方都这样做，你的原始问题就解决了

一路上捡到的其他东西

我发现调试起来很困难，因为没有脚本 IE 根本无法工作，但是一旦我让它工作了，例如IE7 及更低版本不喜欢指示器图像的float: right，它使链接保持 100% 宽，这意味着“Ashton Klein”，第一个链接，是顶部菜单栏的 100% 宽，然后是将所有其他菜单项扔到下面的行中

解决这个问题的方法是绝对定位图像，但这意味着链接不够宽，无法从文本中“边缘化”图像，但 Superfish 也会对这些链接进行分类sf-with-ul，因此您可以添加额外的向右填充它们 - 然后将图像放置在填充空间中

我更改了相当多的菜单链接的大小，因为它在 IE 中根本不稳定，并且在版本和浏览器之间有所不同切断..你也不能使用display: inherit;（你应该可以，但它太麻烦了）这就是为什么没有脚本菜单不会重新出现

抱歉，我认为最好提供代码，以便您现在可以将您的版本与这个版本进行比较，以查看所有差异。

链接到working example

如果您在底部注释掉脚本，您会发现它现在也可以在没有它的情况下工作，尽管显然没有花哨的延迟；)