|
#2
xjlzq2022-11-14 21:37
<!DOCTYPE html>
<html> <head> <style> * { margin: 0; padding: 0; } li { list-style: none; } .father { display: inline-block; position: relative; background-color: red; font-size: 18px; float: left; margin-left: 23px; } .son { position: absolute; display: none; background-color: green; top: 24px; right: 0; } .son li:hover { background-color: blue; } .father:hover .son { display: block; } .s1{ display: none; } .f1:hover .s1{ display: block; } </style> </head> <body> <div> <li class="father">一级菜单 <ul class="son"> <li>二级菜单</li> <div class="f1"> <li>二级菜单 <div class="s1"> <ul> <li>三级</li> <li>三级</li> </ul> </div> </li> </div> <li>二级菜单</li> </ul> </li> <li class="father">一级菜单 <ul class="son"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li class="father">一级菜单 <ul class="son"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </div> </body> </html> |
只有本站会员才能查看附件，请 登录
只能写成这样了，只有二级，三级怎么弄呀，如上面那个附件视频里面一样。
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.father{
display: inline-block;
position: relative;
background-color: red;
font-size:18px;
float:left;
margin-left:23px;
}
.son{
position: absolute;
display: none;
background-color: green;
top: 24px;
right: 0;
}
.son li:hover
{
background-color: blue;
}
.father:hover .son{
display: block;
}
</style>
</head>
<body>
<div>
<li class="father">一级菜单
<ul class="son">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="father">一级菜单
<ul class="son">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="father">一级菜单
<ul class="son">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</div>
</body>
</html>