如何在<li>标记内使多个图像大小相同

Question

我遇到的问题是我无法弄清楚为什么当我定位每个li标签中的所有图像时，它们的尺寸不一致。它们都缩小或变大，但大小不相同。第一项很小，然后全部逐渐增大，最后一项最大。

以下是快照，请注意十字架：

这是我的html：

<nav class="nav2">
        <ul>
          <li><a href="#"><img src="images/down_arrow.png" alt="cross">MENU</a></li>
          <li><a href="#"><img src="images/down_arrow.png" alt="cross">LOCATIONS</a></li>
          <li><a href="#"><img src="images/down_arrow.png" alt="cross">CATERING</a></li>
          <li><a href="#"><img src="images/down_arrow.png" alt="cross">GIFT CARDS</a></li>
          <li><a href="#"><img src="images/down_arrow.png" alt="cross">ORDER ONLINE</a></li>
        </ul>
</nav>

如果您注意到我将这些图像作为目标并赋予它们相同的宽度，那么这是该部分的css。

/*SECOND NAV*/

.nav2{
  font-size:15px;
  color:grey;


}

.nav2 ul{
  padding:0;
  margin-left:600px;
}

.nav2 li{

  display:inline-block;


}

.nav2 li a{
  text-decoration:none;
  color:black;
  font-weight:bold;
  height:100%;
  width:100%
  padding:0;
}

.nav2 li img{
  margin:0;
  padding:0;
  vertical-align: middle;
  width:30%;
  margin-right:-10px;

}

最终目的是使它们看起来像这样：

非常感谢您的帮助，并在此先感谢您。