多个导航标签冲突

Question

我有两个用于移动和桌面导航的导航标签，问题是当我在页面底部包含第二个导航菜单时，桌面菜单会显示在底部。如果我将桌面菜单的位置设置为固定且顶部0，它将保持在最顶层。有什么方法可以用任何其他替代品替换导航标签吗？我尝试了div，但这不起作用。

<nav><!-- desktop -->
<ul>
<li></li>
<li></li>
</ul>
</nav>


<nav><!-- mobile-->
<ul>
<li></li>
<li></li>
</ul>
</nav>

Answer 1

在CSS中使用以下声明：

  

仅@media屏幕和（max-device-width：480px）{...}

将特定于移动设备的代码放在括号内！

（或链接到完全不同的CSS文件，如下所示：

<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />

）

Answer 2

您可以识别以下导航：

<nav id="desktopNavigation">....</nav>

<nav id="mobileNavigation">....</nav>

并使用简单的javascript来隐藏桌面导航，或者您可以使用其他脚本lang。

但;如果我正在编写该代码，我更喜欢使用相同的导航与不同的css文件，如朋友在顶部发送，而我写这个解释（使用媒体属性）

Answer 3

另外一件事，我想你想一想;当您使用nav标签时，您不需要使用ul li标签，只需使用标签即可。你得到了同样的结果。