听说很多小白菜鸟还不会做二级菜单，小编简单教大家怎么用纯css实现二级下拉菜单。
实现的原理很简单，就是用display和hover就行了。同理，也可以用这个方法实现三级菜单效果。
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>纯css实现导航下拉菜单</title><style>a{color: white;text-decoration: none;}nav li{display:block;float: left;width: 150px;height:30px;line-height: 30px;text-align: center;background: #000;position: relative;}nav li a{display:block;}nav li ul{display: none;width: 150px;position: absolute;left: 0;top: 30px;padding: 0;margin: 0;background-color: red;}nav li:hover ul{display: block;}</style></head><body><nav><li><a href="">菜单一</a><ul><a href="">下拉菜单1</a><a href="">下拉菜单1</a><a href="">下拉菜单1</a><a href="">下拉菜单1</a><a href="">下拉菜单1</a></ul></li><li><a href="">菜单二</a><ul><a href="">下拉菜单2</a><a href="">下拉菜单2</a><a href="">下拉菜单2</a><a href="">下拉菜单2</a><a href="">下拉菜单2</a></ul></li><li><a href="">菜单三</a></li><li><a href="">菜单四</a></li><li><a href="">菜单五</a></li></nav></body></html>
效果图如下
