html+css就够了
效果演示.zip
(449.18 KB)
只能写成这样了，只有二级，三级怎么弄呀，如上面那个附件视频里面一样。
<!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>
