如何在CSS中实现响应式导航菜单下拉效果_hover与媒体查询结合

<nav class="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li class="dropdown">
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">产品一</a></li>
        <li><a href="#">产品二</a></li>
      </ul>
    </li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

.submenu {
  display: none;
  position: absolute;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  list-style: none;
  padding: 0;
  margin: 0;
}
<p>.dropdown:hover .submenu {
display: block;
}</p><p>.navbar ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}</p><p>.navbar a {
display: block;
padding: 1rem;
text-decoration: none;
color: #333;
}</p>

@media (max-width: 768px) {
  .navbar ul {
    flex-direction: column;
  }
<p>.dropdown > a::after {
content: " ▼";
font-size: 0.8em;
}</p><p>.submenu {
position: static; /<em> 取消绝对定位 </em>/
box-shadow: none;
background: #f4f4f4;
display: none; /<em> 默认隐藏 </em>/
}</p><p>.dropdown:hover .submenu {
display: block;
}
}</p>

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
<p>.dropdown:hover .submenu {
max-height: 200px;
}</p>