CSS导航菜单背景图片

Question

I want to realize an horizontal menu with a responsive background image. 我想实现带有响应性背景图像的水平菜单。

My problem is that if I put full-screen window the 'ul' menu is shifted respect to the background image. 我的问题是，如果我放置全屏窗口，则'ul'菜单将相对于背景图像转移。 I even tried to set two different 'div' (one for the image and the other for the menu) inside a 'div' container but it doesn't work. 我什至尝试在“ div”容器内设置两个不同的“ div”（一个用于图像，另一个用于菜单），但是它不起作用。

Moreover if I resize, the smallest window size, the menu comes out from the image bar. 此外，如果我调整大小（最小的窗口大小），菜单将从图像栏出来。

I don't want to use 'px' settings, because I want to get a website that is as responsive as possible. 我不想使用“ px”设置，因为我想获得一个响应速度最快的网站。

HTML and CSS: 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

Replace your: 更换：

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

with: 与：

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

Tip: Make sure the path to your img is correct. 提示：确保img的路径正确。

I used the above and it works (with an img of mine of course). 我使用了上面的方法，并且可以正常工作（当然还有我的img）。

Now for the responsive part, it is more common to add 3 images, 1 for each resolution you want and to set each image according to a @media query you will set. 现在对于响应部分，更常见的是添加3张图像，为您想要的每种分辨率添加1张图像，然后根据将要设置的@media查询来设置每张图像。

For example: 例如：

@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");
    }
   }

Finally the best way to create a responsive menu is to use bootstrap. 最后，创建响应菜单的最佳方法是使用引导程序。 You should read more about it here navigation bar 您应该在这里阅读更多关于它的导航栏

Answer 2

In html standard a ul canot be a child of another ul, you should put your code like this to avoid html validition error 在html标准中，一个ul可以是另一个ul的子代，您应该像这样放置代码，以避免html验证错误

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

a child ul should have a parent of a li Then do the styling afterwards 一个孩子ul应该有一个li的父母，然后再做造型

CSS导航菜单背景图片

问题描述

2 个解决方案

解决方案1
2 2018-02-02 13:14:07

解决方案2
0 2018-02-02 12:08:26

CSS导航菜单背景图片

问题描述

2 个解决方案

解决方案1 2 2018-02-02 13:14:07

解决方案2 0 2018-02-02 12:08:26

解决方案1
2 2018-02-02 13:14:07

解决方案2
0 2018-02-02 12:08:26