1、思路分析
- 鼠标移入菜单出现并翻转
- 鼠标移出收回菜单
2、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻转菜单-综合练习</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width: 400px;
height: 40px;
background-color: #3c3c3c;
color: white;
margin: 0 auto;
line-height: 50px;
margin-top: 100px;
}
div{
width: 400px;
height: 300px;
box-sizing: border-box;
border: 1px solid #000;
background-color: pink;
margin: 0 auto;
}
.nav>li{
width: 120px;
line-height: 40px