W3Schools 代码 - Tryit

<!DOCTYPE html>
<html>
<head><meta http-equiv="content-security-policy" content="script-src 'none'">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}

#main {margin-left: 4px;}

#leftsidebar {
  float: none;
  width: auto;
}

#menulist {
  margin: 0;
  padding: 0;
}

.menuitem {
  background: #CDF0F6;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  list-style-type: none;
  margin: 4px;
  padding: 2px;
}

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}
</style>
</head>
<body>

<div id="main">
    <h1>Измените размер окна браузера, чтобы увидеть эффект!</h1>
    <p>В этом примере показано меню, которое будет перемещаться слева от страницы, если область просмотра имеет ширину 480 пикселей или шире. Если размер области просмотра меньше 480 пикселей, меню будет поверх содержимого.</p>
  </div>
</div>

</body>
</html>