css实现二级复选框 |elipsis css

<ul>
<li>第一项
<ul>
<li><input type="checkbox">子项一</li>
<li><input type="checkbox">子项二</li>
<li><input type="checkbox">子项三</li>
</ul>
</li>
<li>第二项</li>
<li>第三项
<ul>
<li><input type="checkbox">子项一</li>
<li><input type="checkbox">子项二</li>
<li><input type="checkbox">子项三</li>
</ul>
</li>
</ul>

大家使用了一个无序列表来展示子项，每个子项使用了一个复选框来表示选中状态。现在，大家来开启CSS的魔法。

ul {
list-style-type: none; /*去除圆点*/
}
ul ul {
display: none; /*默认隐藏*/
}
ul li {
position: relative; /*为下级菜单设置定位基线*/
}
ul li:hover ul {
display: block; /*鼠标悬停时显示*/
position: absolute; /*将下级菜单绝对定位*/
top: 100%; /*设置下级菜单相对于上级菜单的位置*/
left: 0;
}
ul li:hover li {
float: none; /*取消下级菜单的浮动效果*/
width: 100%; /*使下级菜单占满父级菜单的宽度*/
text-align: center; /*使子项居中显示*/
}

以上CSS代码使用了伪类:hover，表示当鼠标悬停在菜单项上面时，显示下级菜单项。使用了position属性将下级菜单绝对定位到其父元素的底部。设置子项的width属性后，可以使子项占满父级菜单的宽度。

现在，大家就成功地实现了二级复选框。祝你学习愉快。