Html 最后一个子选择器不工作

我和最后一个孩子有点矛盾。我有一个下拉导航，需要使最后一个下拉对齐不同于其他，因为文本被切断

我的CSS用于普通下拉列表，如下所示：

.mainnav ul > li > ul {
  padding: 0;
  position: absolute;
  top: 43px;
  left: -20px;
  padding-top: 10px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  max-height: 0px;
  overflow: hidden;
  -webkit-transiton: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  -transition: all 0.4s;

}

当我调整最后一个下拉列表时，我尝试使用：

.mainnav ul > li > ul:last-child{
  padding: 0;
  position: absolute;
  top: 43px;
  left: -120px;
  padding-top: 10px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  max-height: 0px;
  overflow: hidden;
  -webkit-transiton: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  -transition: all 0.4s; 
}

但是当我把它放进去的时候，它会影响所有的下拉列表。您可以在此处看到测试站点：

我正在尝试调整“影响”下拉列表

---

感谢您的帮助。

.mainnav ul>li>ul:last child

选择所有与选择器匹配的元素的最后一个子元素

用于在最后一个

使用

而不是

.mainnav ul > li > ul:last-child{

只是尝试了一下，但它根本没有确认伪类。创建了一个fiddle：缺少一些样式，因为它们是在后端输入的，但它的工作方式足以挖掘它。我还将尝试编辑的两种样式放在CSS的顶部。
.mainnav ul > li > ul:last-child{