标记

Question

我在网站上使用下拉菜单，除了IE之外，它们完美地工作。

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

我正在使用superfish作为菜单，一旦你将鼠标移开链接，菜单就会在屏幕上停留约2-3秒，而且它稍微偏离位置。

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

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

Navigation working correctly

After image of the menu

这是菜单的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

好的，这需要一段时间才能完全调试，Superfish的主要功能是你的菜单应该在添加Superfish增强功能之前工作，而不是你自己的文档（用我的粗体）：

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

原始问题

您实施延迟的原因是因为您未将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中根本不稳定，并且在版本和浏览器之间有所不同，有时滴在文本上开始太高，在FF中它们实际上是切断..你也不能使用display: inherit;（你应该可以，但它太麻烦了）这就是为什么菜单没有脚本重新出现

抱歉，我认为最好给出代码，这样你就可以把你的版本与这个版本进行比较，看看所有的差异......

链接到working example

如果您在底部注释掉脚本，您会看到它现在可以正常运行，但显然没有花哨的延迟;）

Answer 2

我没有IE，但前段时间我有类似的问题。我没有梳理你的样式表，但看看是什么解决了它： css menu hover "hangs" in chrome & safari

希望它有所帮助。

Superfish下拉菜单IE

标记

CSS

的jQuery

2 个答案:

原始问题

沿途拾起的其他东西