如何使用文本下方的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>