下拉子菜单上的bootstrap 3箭头

Question

此问题与this关于菜单上的箭头的问题以及this有关Bootstrap v3中子菜单的问题有关。根据这些问题/答案，菜单上可以有上箭头，但也适用于子菜单。

以下组合CSS给出了Bootstrap v3中的子菜单和菜单中的箭头。

.dropdown-menu:before
{
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}
.dropdown-menu:after
{
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

.dropdown-submenu
{
  position:relative;
}
.dropdown-submenu>.dropdown-menu
{
  top:0;
  left:100%;
  margin-top:-6px;
  margin-left:-1px;
  -webkit-border-radius:0 6px 6px 6px;
  -moz-border-radius:0 6px 6px 6px;
  border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu
{
  display:block;
}
.dropdown-submenu>a:after
{
  display:block;
  content:" ";
  float:right;
  width:0;
  height:0;
  border-color:transparent;
  border-style:solid;
  border-width:5px 0 5px 5px;
  border-left-color:#cccccc;
  margin-top:5px;
  margin-right:-10px;
}
.dropdown-submenu:hover>a:after
{
  border-left-color:#ffffff;
}
.dropdown-submenu.pull-left
{
  float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu
{
  left:-100%;
  margin-left:10px;
  -webkit-border-radius:6px 0 6px 6px;
  -moz-border-radius:6px 0 6px 6px;
  border-radius:6px 0 6px 6px;
}

我的问题是如何防止子菜单上的上箭头并将它们作为父菜单的左箭头？