Html 这是使用响应式导航菜单的正确方法吗？

我在一个网站上工作，这是我第一次制作一个响应性强的网站，所以我有点麻烦

我有一个导航菜单，当屏幕达到一定大小时，我想把它折叠成一个汉堡包图标（三个水平条）。目前，我有一个普通的导航菜单和另一个移动设备的下拉版本，它们可以相互改变位置：

<div id="normalnavigation">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</div>

<div id="mobilenavigation">
  <ul>
    <li><img src="Hamburger Icon Here" />
      <ul>
        <li>Line 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
      </ul>
    <li>
  </ul>
</div>

---

就上述代码而言，一切正常。但我想知道这样做是否正确？如果是这样的话，我似乎无法找出让下拉式移动菜单工作所需的css代码。-所以我非常感谢你的帮助。谢谢。

很多时候，您不需要创建两个单独的菜单。您需要做的是在不同的断点（屏幕大小）使用控制元素的样式，即隐藏/显示内联与块。调整窗口大小以查看导航中的布局更改。@hungerstar谢谢，但是在用户将鼠标悬停/按下菜单图标之前，如何隐藏链接？在没有链接干扰其他布局的情况下？你必须使用JS隐藏/显示或CSS和绝对定位，这样它们才不会占用空间。从技术上讲，您可以使用CSS隐藏/显示，但是CSS选择器和标记的实现对我来说有点太严格了。

#mobilenavigation { display:none }

@media only screen and (max-width: 600px) {
  #mobilenavigation { 
    display:inherit
  }
  #normalnavigation {
    display:none
  }
}