jQuery下拉菜单有问题

我已经研究了大约3个小时了，现在没有肉汁，所以我最终屈服了，决定在这里提问。我有一只JSFIDLE，希望有人能看看并帮助我

基本上，我正在尝试创建一个简单的下拉菜单，除了一个小问题外，它工作得很好

当子菜单关闭时，您必须将鼠标移到子菜单上才能使其淡出。您正处于激活子菜单的主链接上，将主链接保留在右侧、左侧或顶部，子菜单将保持静止

我试着用我对JS的基本知识编写我自己的小脚本（我在JSFIDLE上对其进行了注释，以供您查看），如果我能让它只在从顶部、左侧和右侧离开链接时触发，它就会起作用。当您离开主链接并尝试访问子菜单时，子菜单在您的鼠标到达之前消失

我理解为什么会发生这种情况（我告诉它在离开类时消失。dropdown是应用于主链接的类。）但我不知道如何修复它。我对JS很陌生

不管怎样，如果我把你弄糊涂了，很抱歉，这是JS小提琴，让你更好地掌握

看看你是否能看到我的代码被注释掉的问题。如果您将“产品”链接保留在左侧、右侧和顶部，它将不会离开子菜单

然后，您可以取消对我的代码的注释，看看为什么它不起作用

---

我认为您的jQuery代码比它应该的要复杂一些

此外，您的主导航设置有一个奇怪的结构。而不是在主

和子

上，每个链接都是自己的

。您在每个

上都有“mainnav”的id，这有点奇怪，它不是有效的代码。（旁注：一个ID在页面上只能使用一次。如果要多次使用，请将其设置为类。）

我还以我喜欢的方式清理了一些CSS。这并不意味着它比你拥有的更好

HTML:

<ul id="mainnav">
    <li><a href="#">news</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">rentals</a></li>
    <li><a href="#">services</a></li>
    <li class="dropdown"><a href="#" >products</a>
        <ul class="sublinks">
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li><a href="#">link 3</a></li>
            <li><a href="#">link 4</a></li>
        </ul>
    </li>
    <li><a href="#">about</a></li>
    <li class="home"><a href="#">home</a></li>    
</ul>

不管怎样，我做了一把js小提琴，效果很好


基本上，我所做的就是清理你的导航结构。如果在
中创建嵌套的
子链接，则只需在“dropdown”主链接的mousenter/mouseleave上执行所有操作。这样，当您将鼠标移出“子链接”ul时，它会向上滑动，因为它是“下拉”的子项-这有意义吗？
是的，我试图避免使用内联块，因为它的反向兼容性很差，但哦，好吧。谢谢。内联块在较旧的浏览器中不能很好地工作，但是您可以始终使用
display:block
和
float:left
-内联块的唯一优点是可以使用
上的
text align:center
将列表项居中。向左浮动时，你不能这样做。
$(function() {
   $('.dropdown').mouseenter(function() {
       $('.sublinks').slideDown(300);
   });

   $('.dropdown').mouseleave(function() {
       $('.sublinks').slideUp(300);
   });
});