title: fontawesome icon after on submenu links not working correct
body: <p>On my side bar I have a link called Multilevel Menu</p>
  
  <p>Each parent link has a chevron right icon in css.</p>
  
  <p>And when it is click open it then becomes chevron down icon.</p>
  
  <p>The problem I am having is on my sub menu links that has parent class I can not get the chevron down icon to work when link open</p>
  
  <p><strong>Question</strong> What would be the best solution so that on my sub menu links when open it adds chevron down icon currently the sub menu links only able to get chevron right</p>
  
  <p>Codepen Example <a href="http://codepen.io/riwakawebsitedesigns/pen/bdaGro/" rel="nofollow">Click Here</a></p>
  
  <pre><code>/* Sidebar Menu */
  
  #menu, 
  #menu ul, 
  #menu li {
      padding: 0;
      margin: 0;
      min-height: 100%;
      list-style: none;
  }
  
  #menu {
      margin-bottom: 25px;
  }
  
  #menu &gt; li {
      position: relative;
  }
  
  #menu li a {
      text-decoration: none;
      display: block;
      padding: 10px;
      cursor: pointer;
      color: #aaaaaa;
      border-bottom: 1px solid #2d2d2d;
  }
  
  #menu li a i {
      color: rgba(170, 170, 170, 0.7);
      font-size: 16px;
  }
  
  #menu &gt; li &gt; a {
      color: #aaaaaa;
      font-size: 14px;    
      padding-left: 13px;
  }
  
  #menu &gt; li &gt; a:hover {
      background-color: #444444;
  }
  
  #menu &gt; li &gt; a &gt; span {
      display: none;
      margin-left: 8px;
  }
  
  #menu li li a {
      border-bottom: none !important;
  }
  
  #menu li li a:hover {
      color: #aaaaaa;
      background-color: #1e1e1e;
  }
  
  /*
  #menu li li a:before {
      content: "\f101";
      font-size: 14px;
      font-family: FontAwesome;
      margin-left: 10px;
      margin-right: 10px;
      transition: margin ease 0.5s;   
  }
  */
  #menu li li a:hover:before {
      margin-right: 20px;
  }
  
  #menu &gt; li.active &gt; a {
      color: #aaaaaa;
      background: #242424;
  }
  
  #menu li.active li a {
      color: #aaaaaa;
  }
  
  #menu li li.active &gt; a:last-child {
      color: #aaaaaa;
  }
  
  #menu li li.active a:last-child:before {
      margin-left: 20px;
      margin-right: 10px;
  }
  
  #menu &gt; li &gt; ul {
      position: absolute;
      left: 50px;
      top: 0px;
      width: 210px;
      background-color: #313131;
      visibility: hidden;
  }
  
  #menu li ul {
      overflow: hidden;
  }
  
  #menu li li a.parent:after, #column-left.active #menu &gt; li a.parent:after {
      font-family: FontAwesome;
      content: "\f105";
      float: right;
      margin-right: 8px;
  }
  
  #menu li li.open &gt; a.parent:after, #column-left.active #menu &gt; li.open &gt; a.parent:after {
      font-family: FontAwesome;
      content: "\f107";
      float: right;
      margin-right: 8px;
  }
  
  #menu li ul a {
      padding-left: 20px;
  }
  
  #menu li li ul a {
      padding-left: 40px;
  }
  
  #menu li li li ul a {
      padding-left: 60px;
  }
  
  #menu li li li li ul a {
      padding-left: 60px;
  }
  
  #menu li li li a.parent:after, #column-left.active #menu &gt; li a.parent:after {
      font-family: FontAwesome;
      content: "\f105";
      float: right;
      margin-right: 8px;
  }
  
  #menu li li li.open &gt; a.parent:after, #column-left.active #menu &gt; li.open &gt; a.parent:after {
      font-family: FontAwesome;
      content: "\f107";
      float: right;
      margin-right: 8px;
  }
  </code></pre>