html - 如何在文本下方使用 png 图像创建导航菜单

Question

我是一名未编码的网站设计师，正在寻找如何创建此导航栏:

变成这样:

我已经有了图像资源，只是不知道如何编码以及将代码放在哪里。

当前网站设计(使用 wordpress):http://beta.mkp.co.id/shop/

Answer 1

你可以像这样使用 before 元素:

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(/image/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>