Question

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

有没有人知道如何防止这种行为..似乎它认为它会被淘汰..即使它还没有......

网址：http://vasoshield.xcsit.com/index.html

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>

jquery的

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

}）;

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;}

Answer 1

请注意，$('#mainNav ul li')表达式与内部li元素匹配。尝试使用$('#mainNav > ul > li')作为主表达式。

此外，您可以通过更改背景颜色和填充来模拟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中的问题。

Answer 2

尝试使用mouseenter和mouseleave而不是悬停。鼠标进入和离开也包括子元素。请参阅示例here。

您也可以将菜单向上移动1或2像素。我只是快速检查过，但是在IE7和6中看起来两个元素（a和UL）之间有一个额外的像素会导致无悬停发射。

Answer 3

您是否尝试过使用mouseenter和mouseleave？

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

Answer 4

在这里推测。 IE将边界，填充和边距视为间隙。你的ul＆gt; li有border-bottom：2px; 这意味着你们之间存在差距。当你进入差距时，它会触发mouseout事件。尝试删除边框以查看它是否有效。

Jquery Mouse Over效果..在应该之前“退出”

4 个答案: