Question

我想要实现一个带有响应背景图像的水平菜单。

我的问题是，如果我放入全屏窗口，'ul'菜单会相对于背景图像移动。我甚至尝试在'div'容器内设置两个不同的'div'（一个用于图像，另一个用于菜单），但它不起作用。

此外，如果我调整大小，窗口大小最小，菜单会从图像栏中显示出来。

我不想使用'px'设置，因为我想获得尽可能响应的网站。

HTML和CSS：

.menu {
  margin-top: 1%;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 11vh;
  background: url(../Images/menu.png) no-repeat;
  background-size: 90% 10vh;
  margin-bottom: 5%;
}

<body class="container">
  <div class="menu">
    <ul>
        <li> foo1 </li>
        <li> foo2 
            <ul>
              <li> sub </li>
            </ul>
        </li>
        <li> foo3 </li>
    </ul>
  </div>
</body>

Answer 1

替换你的：

background: url(../Images/menu.png) no-repeat;

使用：

background-image: url("../Images/menu.png");
background-repeat: no-repeat;

提示：确保img的路径正确无误。

我使用了以上内容并且它有效（当然是我的img）。

现在对于响应部分，更常见的是添加3个图像，每个分辨率为1，并根据您将设置的@media查询设置每个图像。

例如：

@media (max-width: 1200px) {
    .menu {
        background-image: url("../Images/menu1200.png");
    }
   }

@media (max-width: 767px) {
    .menu {
        background-image: url("../Images/menu767.png");
    }
   }

@media (max-width: 480px) {
    .menu {
        background-image: url("../Images/menu480.png");
    }
   }

最后，创建响应式菜单的最佳方法是使用bootstrap。您应该在navigation bar

了解更多信息

Answer 2

在html标准中，一个ul canot是另一个ul的子节点，你应该把这样的代码放在这里以避免html验证错误

<ul>
     <li> foo1 </li>
     <li> foo2  
            <ul> 
                        <li> sub </li> 
            </ul>
     </li>
      <li> foo3 </li>
</ul>

小孩ul应该有李的父母然后做样式

CSS导航菜单背景图像

2 个答案: