Jquery鼠标悬停效果。。“走”；“出去”；在它应该之前

所以我为一个小项目创建了一个简单的菜单。当人们在IE6或IE7上的菜单上鼠标进出时，菜单将下拉。。但是如果你慢慢地向下移动鼠标，它会向上移动

有人知道如何防止这种行为吗。。它似乎认为它正在消失。。尽管还没有

网址：

html结构：

<div id="mainNav">
<ul>
    <li class="requestInfoLink">
        <a href="#">Request Info</a>
        <ul>
            <li><a href="ordering.html">Ordering</a></li>
            <li class="last"><a href="contact-us.html">Contact Us</a></li>
        </ul>
    </li>   
    <li class="newsLink">
        <a href="#">News</a>
        <ul>
            <li class="last"><a href="press-releases.html">Press Release</a></li>
        </ul>
    </li>
    <li class="productLink">
        <a href="#">Product</a>
        <ul>
            <li><a href="overview.html">Overview</a></li>
            <li class="last"><a href="uses.html">Uses</a></li>
        </ul>
    </li>
</ul>

}))

css：

    #mainNav { padding-top: 175px;  }
#mainNav ul { border-bottom: 4px solid #369790; width: 765px; height: 33px;}
#mainNav li a { text-align: center; display: block; height: 24px; font-size: 12px; text-transform: uppercase; padding-top: 9px; line-height: 25px; text-decoration: none; color: black; font-weight: bold;}
#mainNav ul li a:hover { font-weight: bold; }
#mainNav li {  position: relative; float: right; margin-left: 15px; }

#mainNav ul ul { position: absolute; display: none; border: none; width: auto; height: auto; top: 33px; z-index: 999; border-top: 4px solid #369790;}
#mainNav ul ul li a { background: none; height: auto; padding: 0; margin: 0; line-height: 33px; color: #a0a0a0; }
#mainNav ul ul li a:hover { background-color: #939598; color: #616264; }
#mainNav li li { float: none; height: auto; margin: 0; background-color: #c9cacc; border-bottom: 2px solid #dcddde;}

#mainNav li.productLink a { width: 151px; background: url(../images/long_nav2.gif) no-repeat;}
#mainNav li.newsLink a { width: 90px; background: url(../images/short_nav2.gif) no-repeat; }
#mainNav li.requestInfoLink a { width: 151px; background: url(../images/long_nav2.gif) no-repeat; }
#mainNav li.productLink ul { width: 152px; }
#mainNav li.newsLink ul { width: 90px;  }
#mainNav li.requestInfoLink ul { width: 151px;  }
#mainNav li.newsLink ul li a { line-height: 1.6em; height: 40px; padding-top: 5px; }
#mainNav li.productLink li a { background: none;}
#mainNav li.newsLink li a { background: none;}
#mainNav li.requestInfoLink li a { background: none;}

---

尝试mouseenter和mouseleave，而不是悬停。鼠标输入和离开也会覆盖子元素。参见示例

---

您还可以将菜单向上移动1或2个像素。我只是很快地检查了一下，但在IE7和IE6中，两个元素（a和UL）之间似乎有一个额外的像素导致取消悬停触发。

您尝试过使用mouseenter和mouseleave吗

$(document).ready(function() {
  $('#mainNav ul li').mouseenter(function() {
    $(this).find('ul').slideDown(100);
    }).mouseleave(function () {
      $(this).find('ul').slideUp(50);
    });
);

在这里投机。 IE将边框、填充和边距视为间隙。您的ul>li有边框底部：2px； 这意味着你和你的李之间有差距。当你进入间隙时，它触发mouseout事件。 正在尝试删除边框以查看其是否有效。

请注意

$（'mainNav ul li'）

表达式与内部

li

元素匹配。尝试对主表达式使用

$（'#mainNav>ul>li'）

此外，您还可以通过将背景颜色和填充更改为：

#mainNav ul ul li a { background-color: #c9cacc; height: auto; padding: 0; margin: 0; line-height: 33px; color: #a0a0a0; }
#mainNav li li { float: none; height: auto; margin: 0; background-color: #dcddde; padding-bottom: 2px; }

---

这将解决你在IE中的问题。

好的，太好了，它成功了！IE有一个糟糕的长方体模型，所以在使用悬停事件时边界可能是一个问题。

#mainNav ul ul li a { background-color: #c9cacc; height: auto; padding: 0; margin: 0; line-height: 33px; color: #a0a0a0; }
#mainNav li li { float: none; height: auto; margin: 0; background-color: #dcddde; padding-bottom: 2px; }