javascript - 显示/隐藏非父子元素时，悬停将不起作用

Question

我有这样的代码

<ul id="mainmenu">
 <li><a href="#">mainlink1</a></li>
 <li><a href="#">mainlink2</a></li>
 <li><a href="#">mainlink3</a></li>
<ul>

但我希望“mainlink2”有一个子菜单，我不想像子菜单一样放置它，因为当我将子菜单设置为“绝对”时，我无法将其宽度适合屏幕并成为中心，所以我在 'ul' 之外创建了一个 div，如下所示...

 <div>
  <ul id="submenu">
   <li>sub1</li>
   <li>sub2</li>
   <li>sub3</li>
  </ul>
 </div>

当我调用 javascript .hover 时，我看不到子菜单。我尝试通过记住主菜单的索引来将类添加到“子菜单”，当它匹配时，我添加类以显示子菜单，当不悬停时，我删除类。但是当我将鼠标从主菜单中离开时，悬停功能无法执行此操作，子菜单将隐藏。

Answer 1

试试这个:

HTML:

<ul id="mainmenu">
 <li><a href="#">mainlink1</a></li>
 <li class="mainlink2"><a href="#">mainlink2</a></li>
 <li><a href="#">mainlink3</a></li>
</ul>

<div class="submenu" style="position:absolute;background:#ddd; margin-left:-250px;left:50%;display:none;width:500px">
  <ul id="submenu">
   <li>sub1</li>
   <li>sub2</li>
   <li>sub3</li>
  </ul>
 </div>

JQUERY:

$(function(){

    $('.mainlink2').mouseenter(function(){
        $('.submenu').show(500);
    }).mouseleave(function(){
        $('.submenu').hide(500);
    });

});