bootstrap 3 arrow on dropdown submenu

Question

This question ia related to this question about arrows on menus and this question about submenus in Bootstrap v3. According to these questions/answers one can have upper arrow on menus but that applies to submenus as well.

The following combined CSS gives the submenus in Bootstrap v3 and arrow to menus.

.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;
}

My question is how to prevent upper arrow on submenus and make them as left arrow to parent menu?