我有这样的代码
<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时,我看不到子菜单。 我尝试通过记住主菜单的索引将一个类添加到"子菜单"中,当它匹配时,我添加类以显示子菜单,当不悬停时,我删除类。但是当我从主菜单中离开鼠标时,悬停功能无法做到这一点,子菜单是隐藏的。
试试这个:
.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);
});
});