如何创建导航菜单与png图片文字

Question

我未编码的网站设计师寻找如何创建此导航栏下方：

要成为这样的：

我已经有了图片资源，只是不知道如何编码和放置代码。

目前网站设计（使用WordPress）：http://beta.mkp.co.id/shop/

Answer 1

你可能之前元素像这样使用：

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: yellow; 
 
    margin: 10px; 
 
    padding; 
 
    0 10px; 
 
} 
 

 
ul li { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 0 5px; 
 
    padding: 10px; 
 
} 
 

 
ul li a { 
 
    position: relative; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    z-index: 2; 
 
} 
 

 
ul li:before { 
 
    position: absolute; 
 
    content: " "; 
 
    top: -5px; 
 
    right: -5px; 
 
    left: -5px; 
 
    bottom: -5px; 
 
    background: url(https://i.stack.imgur.com/7Ec3P.png); 
 
    z-index: 0; 
 
    opacity: 0; 
 
    background-size: 100%; 
 
} 
 

 
ul li:hover:before { 
 
    opacity: 1; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">Link 1</a></li> 
 
    <li><a href="#">Link 2</a></li> 
 
    <li><a href="#">Link 3</a></li> 
 
    <li><a href="#">Link 3</a></li> 
 
    </ul> 
 
</nav>