css代码：
*{
margin: 0px;
padding: 0px;
}
#box{
position: absolute;
height: 300px;
width: 150px;
background-color: antiquewhite;
right: -150px;
text-align: center;
position: fixed;
transition: 0.75s;
border-radius: 20px;
}
#box2{
width: 500px;
}
ul li{
list-style: none;
overflow: hidden;
}
ul li a{
position: relative;
text-decoration: none;
/* background-color: aqua; */
display: block;
line-height: 30px;
}
ul li a:hover{
background-color:lightsteelblue;
}
#chb{
display: none;
}
label{
position: absolute;
position: fixed;
right: 150px;
width: 50px;
height: 50px;
background-color: burlywood;
border-radius: 15px;
display: inline-block;
color:orangered ;
font-size: large;
text-align: center;
line-height: 45px;
cursor: pointer;
}
#chb:checked ~ #box{
right: 0px;
}html代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="daohang.css">
</head>
<body>
<input type="checkbox" id="chb">
<label for="chb">菜单</label>
<div id="box">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">用户管理</a></li>
<li><a href="#">用户配置</a></li>
<li><a href="#">内容</a></li>
<li><a href="#">功能配置</a></li>
<li><a href="#">管理员</a></li>
</ul>
</div>
<div id="box2">
<p>内容</p>
</div>
</body>
</html>