如何解决父级<li>覆盖下级的<ul>下的<li>

当鼠标移动到父级<li>时，显示子级<ul>下的<li>内容，但是会出现父级<li>并未随着显示子级<ul>下的<li>内容向下移动而是覆盖在子级的<ul>下的<li>内容之上jsp页面<c:forEach var="menu2" items="${ArrayMenu2}"> <ul class="nav" id="nav"> <li value="${menu2.tm_Id}"> <a href="#">${menu2.tm_Name}</a> <ul> <li>eeeeee</li> <li>tttttt</li> <li>oooooo</li> </ul> </li> </ul></c:forEach><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script><script type="text/javascript">$(function() { $(".nav>li").hover(function(){$(this).children("ul").css("display","block").stop().slideDown()},function(){$(this).children("ul").stop().slideUp()})});</script>css样式.leftbody{ background:#a49485;}.leftdiv{ position:relative; background-size:cover; width:230px; height:900px; opacity:0.8;}.leftdiv2{ position:absolute; top:0px; left:3px; width:224px; height:900px;}.leftli0{ background: url("../image/left0.jpg") no-repeat; background-size:100% 100%; color:#ffffff; text-align:center; list-style:none; height:38px; line-height:38px; font-family:楷体; font-size:22px;}.nav a{ text-decoration:none; color:#000000; display:block;}.nav li{ background: url("../image/left1.jpg") no-repeat; background-size:cover; text-align:center; list-style:none; height:38px; line-height:38px;}.nav ul{ display:none;}.nav ul li{ background:#ffffff;}

举报该文章