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时，我无法看到子菜单。我试着通过记住mainmenu的索引将一个类添加到“子菜单”，当它匹配时我添加类来显示子菜单，当不悬停时我删除了类。但是当我从主菜单中将鼠标从子菜单中隐藏时，悬停功能无法执行此操作。

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

});

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

1 个答案: