html - 创建响应式菜单不起作用

Question

我正在创建个人网站，所以我不能 100% 确定内容断点是什么。我目前使用 320px(手机)、768px(平板电脑)和 1024px(桌面)。我不知道我是否需要一个特定于平板电脑的设备，因为它们可能会使用全屏，但我已经准备好了以防万一。

我在全屏显示内嵌菜单链接时遇到问题，而且我无法弄清楚在移动 View 模式下如何获得下拉菜单。我将元视口(viewport)设置为设备宽度和 1。

我希望内联模式将鼠标悬停在每一个上以显示填充了 8px x 20px 的背景颜色。如果可能的话，我试图一起避免使用 javascript 和 jquery。也没有花车。

HTML

<nav class="nav-menu" role="navigation">

  <ul>
    <li><a class="blue" href="" title="Home">Home</a></li>
    <li><a class="red" href="" title="Blog">Blog</a></li>
    <li><a class="green" href="" title="Contact">Contact</a></li>
  </ul>

  <a href="#" id="pull"></a>

</nav>

https://jsfiddle.net/xpu9bxjc/

如有任何帮助，我们将不胜感激!

Answer 1

在您的 fiddle 中，您的移动菜单显示在中等和更大的屏幕尺寸上，而非移动菜单在您缩小到移动尺寸屏幕时显示。

要解决此问题，请将您的媒体查询更改为:

@media only screen and (min-width: 320px) {

到:

@media only screen and (max-width: 320px) {

要添加悬停效果，您需要将 :hover 添加到您的选择器，然后在悬停时应用您想要的任何样式。

.nav-menu a:hover {
    /* put hover styles here */
}

在您的 fiddle 中更新了这些.