简单布局:
<li class="floatL downList navlist">
<a href="javascript:;" class="navtxt">项目案例</a>
<div class="downListCon" style="width: 220px;display: none;">
<div class="listDown">
<ul class="onelist">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
</div>
</li>
js思路:
- 鼠标mouseover到父级元素li.downList
- 获取父元素下标,找到对应下标下拉框显示
var index = $(".downList").index($(this));
$(".downListCon").eq(index).show(); - 鼠标mouseleave(移出)downList
- 子元素隐藏
$(this).find(".downListCon").hide();