所以我目前正在尝试使用 JQuery 并且到目前为止导航工作正常。我是来添加下拉列表的，它会引起问题，想知道是否有人能明白为什么。
HTML：
<ul id="navigation">
<li id="first" onclick="window.location='index.html';"><span id="logo"></span><span class="navigation-text">Home</span></li>
<li class="standard"><span class="gallery_icon"></span><span class="navigation-text">Gallery</span>
<ul class="subnavigation">
<li>Portfolio 1 Column</li>
<li>Portfolio 2 Column</li>
</ul>
</li>
<li class="standard"><span class="gallery_icon"></span><span class="navigation-text">Gallery</span></li>
<li class="standard"><span class="gallery_icon"></span><span class="navigation-text">GalleryGallery123</span></li>
</ul>
查询：
<script type="text/javascript">
$(document).ready(function() {
// On hover:
$('#navigation li').hoverIntent(function () {
width = $(this).children('span:nth-child(2)').width();
text = $(this).children('span:nth-child(2)');
var newwidth = (width + 15) // Original width + 15px padding
text.filter(':not(:animated)').animate({"width":"1px"}, 0).show(); // Make the width 0px and make the element visible
text.animate({"width":+newwidth+"px"}, 300); // Animate the width to the new size
$(this).children('ul').slideDown('slow')
},
function () {
text.animate({"width":"1px"}, 150); // Animate the width to 0px and hide the element
text.animate({"width":+width+"px"}, 0);
setTimeout(function() {
$('#navigation li .navigation-text').hide();
},100);
$(this).children('.subnavigation').slideUp('slow');
});
});
</script>
如果您将鼠标悬停在绿色栏或任何不包含下拉列表的 LI 上，则它可以正常工作。如果您再次执行此操作，它会打开和关闭并继续工作。但是，如果您将鼠标悬停在下拉列表上并将其保持在该下拉列表的第一个 LI 上，然后继续移动到父级关闭的第二个 LI，最终大小错误，并且下拉列表的第一个 LI 隐藏其自身。
如果你玩它可能最好，这样你就知道我在说什么，因为我不确定这是否有意义。
JFiddle： http: //jsfiddle.net/5NcHk/ 直播：http ://dev.evaske.com/Navigation/