注意事项：
1.二级菜单的hover事件一定要写在父元素才起作用
2.为了防止导航栏下面的banner图或内容盖住二级菜单，需要给导航栏定位， 来提高二级菜单的层级
3.定位之后，二级菜单的宽将不再继承它父元素的宽，需要重新定义，否则它将被内容撑开
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin:0 ;padding:0}ul li{width: 100px;height:30px;line-height:30px; background-color: yellow;list-style: none;float: left; position: relative}div{width: 100px;height: 100px;background-color: red;display: none;position: absolute;left:0;top:30px;}li:hover{background-color: yellow}ul li:hover div{display: block}</style></head><body><ul><li><a href="">菜单栏一</a><div>菜单栏二</div></li><li><a href="">菜单栏一</a><div>菜单栏二</div></li><li><a href="">菜单栏一</a><div>菜单栏二</div></li><li><a href="">菜单栏一</a><div>菜单栏二</div></li></ul></body></html>
如果觉得《css实现二级菜单》对你有帮助，请点赞、收藏，并留下你的观点哦！
