CSS導航菜單背景圖片

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

最后，創建響應菜單的最佳方法是使用引導程序。 您應該在這里閱讀更多關於它的導航欄

Answer 2

在html標准中，一個ul可以是另一個ul的子代，您應該像這樣放置代碼，以避免html驗證錯誤

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

一個孩子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