Question

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

我无法在全屏显示菜单链接内联，而且在移动浏览模式下我无法弄清楚如何获取下拉菜单。我将元视口设置为设备宽度和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

在您的小提琴中，您的移动菜单会显示在中等和最高的屏幕尺寸上，而当您缩小到移动尺寸屏幕时，您的非移动菜单会显示。

要解决此问题，请从以下位置更改媒体查询：

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

为：

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

要添加悬停效果，您需要将:hover添加到选择器，然后将所需的任何样式应用于那里。

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

在fiddle。

中更新了这些内容

创建响应式菜单不起作用

1 个答案: