其中一个子菜单没有正确对齐

Question

我正在开发包括MVC在内的ASP.Net核心项目。我的观点完全在HTML5，CSS，Bootstrap中。它很奇怪，我的一个子菜单正确对齐，即使CSS，HTML对于所有子菜单都是相同的。我尝试了所有可能性，无法弄清楚。

我的代码就像，

 <li>
    <a class="homer" href="#">PRODUCTS & SERVICES</a>
    <ul class="sub-menu">
      <li><a title="Repair Shop Management System" href="#"><i class="fa fa-arrow-right"></i>  Repair Management System</a></li>
      <li><a title="RailcarRx Insight" href="#"><i class="fa fa-arrow-right"></i>  RailcarRx Insight</a></li>
      <li><a title="CRB System" href="#"><i class="fa fa-arrow-right"></i>   CRB System</a></li>
      <li><a title="Integration and Custom Services" href="#"><i class="fa fa-arrow-right"></i>  Integration and Custom Services</a></li>
      <li><a title="RailcarRx Insight" href="#"><i class="fa fa-arrow-right"></i>  RailcarRx Analytics</a></li>
    </ul>
 </li>

我的CSS菜单是，

 nav .menu li > ul.sub-menu li{
 text-transform: none;
 color: #b7b7b7;
 font-size: 12px;
 }
 nav .menu li > ul.sub-menu li {
 z-index: 50005;
 float: left;
 text-align: left;
 margin: 0 !important;
 padding: 0 !important;
 height: auto;
 display: block;
 width: 100%;
 transition-duration: 0.4s;
 background: rgba(255,255,255,0.0);
 }
 #navigation ul ul li {
 float: none;
 }
 nav .menu li ul.sub-menu li a {
 float: left;
 padding: 7px 0px;
 }
 nav .menu li ul.sub-menu li a:hover{
 color:#cc3300 !important;
 }
 #navigation ul ul ul {
 top: 0;
 left: 100%;
 margin: 0 0 0 10px;
 }

#navigation ul ul ul:after {
content: "";
position: absolute;
width: 10px;
height: 100%;
left: -10px;
top: 0;
opacity: 0;
}
#navigation ul ul:before {
content: "123";
position: absolute;
width: 100%;
height: 10px;
top: -10px;
opacity: 0;
}
#navigation ul li:hover > ul {
opacity: 1;
visibility: visible;
}

如果我更改文字或在我的子菜单 CRB系统中添加字母或空格，它会按预期进行。例如aCRB System或My Sub Menu等等。如果我将CRB System子菜单保留在除第3位之外的其他位置，则会按预期进行。 太奇怪了！

任何帮助都会受到赞赏，为什么会这样。