如何让导航栏菜单元素只在手机上可见？

<nav class="navigation">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

/* 默认样式，导航栏菜单元素在手机和电脑上都可见 */
.navigation ul {
  display: block;
}

/* 媒体查询，屏幕宽度小于某个阈值时，导航栏菜单元素在手机上可见，电脑上隐藏 */
@media screen and (max-width: 768px) {
  .navigation ul {
    display: none;
  }
}