如何使用HTML和CSS创建一个响应式导航菜单布局

<nav>  <ul>    <li><a href="#home">首页</a></li>    <li><a href="#about">关于</a></li>    <li><a href="#services">服务</a></li>    <li><a href="#portfolio">作品集</a></li>    <li><a href="#contact">联系方式</a></li>  </ul></nav>

nav {  background-color: #f1f1f1;}nav ul {  list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;}nav li {  float: left;}nav li a {  display: block;  padding: 8px;  text-decoration: none;  color: #000;}nav li a:hover {  background-color: #ddd;}/* 响应式样式 */@media screen and (max-width: 600px) {  nav ul {    display: none;  }}

<nav>  <input type="checkbox" id="menu-toggle" />  <label for="menu-toggle" class="menu-icon">&#9776;</label>  <ul>    <li><a href="#home">首页</a></li>    <li><a href="#about">关于</a></li>    <li><a href="#services">服务</a></li>    <li><a href="#portfolio">作品集</a></li>    <li><a href="#contact">联系方式</a></li>  </ul></nav>

nav ul {  display: flex;  justify-content: flex-end;}nav li {  display: inline-block;}nav li a {  display: block;  padding: 8px;  text-decoration: none;  color: #000;}nav li a:hover {  background-color: #ddd;}.menu-icon {  display: none;}/* 响应式样式 */@media screen and (max-width: 600px) {  nav ul {    display: none;  }  .menu-icon {    display: inline-block;    cursor: pointer;    padding: 8px;    float: right;  }  #menu-toggle:checked ~ ul {    display: flex;    flex-direction: column;  }  #menu-toggle:checked ~ .menu-icon:before {  }}