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

<nav class="navbar">  <ul class="navbar-nav">    <li class="nav-item">      <a href="#" class="nav-link">首页</a>    </li>    <li class="nav-item">      <a href="#" class="nav-link">产品</a>      <ul class="sub-menu">        <li><a href="#">产品一</a></li>        <li><a href="#">产品二</a></li>        <li><a href="#">产品三</a></li>      </ul>    </li>    <li class="nav-item">      <a href="#" class="nav-link">关于我们</a>    </li>    <li class="nav-item">      <a href="#" class="nav-link">联系我们</a>    </li>  </ul></nav>

.navbar {  background-color: #333;  height: 60px;  padding: 0 20px;}.navbar-nav {  list-style-type: none;  margin: 0;  padding: 0;  display: flex;  align-items: center;}.nav-item {  position: relative;}.nav-link {  color: #fff;  text-decoration: none;  padding: 10px;}.sub-menu {  display: none;  position: absolute;  top: 100%;  left: 0;  background-color: #333;  list-style-type: none;  width: 200px;  padding: 0;  margin: 0;}.nav-item:hover .sub-menu {  display: block;}.sub-menu li {  padding: 10px;}.sub-menu li a {  color: #fff;  text-decoration: none;}

@media screen and (max-width: 768px) {  .navbar-nav {    flex-wrap: wrap;  }    .nav-link {    padding: 10px 0;  }    .sub-menu {    position: static;    display: block;    background-color: transparent;    width: 100%;  }    .sub-menu li {    padding: 10px;    border-top: 1px solid #fff;  }}