纯CSS实现响应式导航栏的下拉菜单效果的实现步骤

<nav class="navbar">  <ul class="nav-menu">    <li class="nav-item">首页</li>    <li class="nav-item with-dropdown">      产品      <ul class="dropdown">        <li class="dropdown-item">产品1</li>        <li class="dropdown-item">产品2</li>        <li class="dropdown-item">产品3</li>      </ul>    </li>    <li class="nav-item">关于我们</li>    <li class="nav-item">联系我们</li>  </ul></nav>

.navbar {  background-color: #f8f8f8;  padding: 10px;}.nav-menu {  display: flex;  justify-content: space-between;  list-style: none;  margin: 0;  padding: 0;}.nav-item {  padding: 10px;}.with-dropdown {  position: relative;}.dropdown {  display: none;  position: absolute;  top: 100%;  left: 0;  background-color: white;  padding: 10px;}.dropdown-item {  padding: 10px;}

.with-dropdown:hover .dropdown {  display: block;}

var dropdowns = document.querySelectorAll('.with-dropdown');dropdowns.forEach(function (dropdown) {  dropdown.addEventListener('click', function () {    this.classList.toggle('active');    var dropdownMenu = this.querySelector('.dropdown');    dropdownMenu.classList.toggle('open');  });});

@media screen and (max-width: 768px) {  .nav-menu {    flex-direction: column;    align-items: stretch;  }  .nav-item {    display: none;    padding: 10px;  }  .navbar.open .nav-item {    display: block;  }  .navbar-button {    display: block;    background-color: #f8f8f8;    border: none;    padding: 10px;    cursor: pointer;  }}

<nav class="navbar">  <button class="navbar-button">菜单</button>  <ul class="nav-menu">    <li class="nav-item">首页</li>    <li class="nav-item with-dropdown">      产品      <ul class="dropdown">        <li class="dropdown-item">产品1</li>        <li class="dropdown-item">产品2</li>        <li class="dropdown-item">产品3</li>      </ul>    </li>    <li class="nav-item">关于我们</li>    <li class="nav-item">联系我们</li>  </ul></nav>