Html 当不活动的CSS img按钮时，列表项的活动链接将消失

我在显示带有活动链接的第n个css按钮/列表元素时遇到问题。第一个css按钮显示时没有问题，并且处于活动状态。当我向列表中添加新按钮时，它们将消失

HTML

---

我还必须将按钮的css类添加到非活动状态

<%= active_link_to '', analytics_path, class_active: 'nav-link analytics-icon-btn active', :class_inactive => 'nav-link analytics-icon-btn' %>

导航链接分析图标btn%%>

.home-icon-btn {
  background:url('white-home-btn-state-1.png') no-repeat;
  cursor:pointer;
  border:none;
  height: 53px;
  width: 50px;

}

.home-icon-btn:hover {
  background: url('white-home-btn-state-2.png') no-repeat;
  cursor: pointer;
}

.analytics-icon-btn {
  background:url('white-analytics-btn-state-1.png') no-repeat;
  cursor:pointer;
  border:none;
  height: 53px;
  width: 50px;
}

.analytics-icon-btn:hover {
  background: url('white-analytics-btn-state-2.png') no-repeat;
  //cursor: pointer;
}
a.active {
  border-bottom: 2px white solid;
  border-spacing: 5px;
  border-collapse: separate;
}

<%= active_link_to '', analytics_path, class_active: 'nav-link analytics-icon-btn active', :class_inactive => 'nav-link analytics-icon-btn' %>