子菜单上的多个箭头形状使用：在css之后

Question

我正在尝试修复单击具有活动状态的元素时出现的错误。我正在使用此代码在活动按钮上的菜单中绘制一个像形状一样的箭头：

＆＃13;

＆＃13;

.bookmarks ul li:active::after
 {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(30, 64, 86, 0);
    border-left-color: #1e4056;
    border-width: 6px;
    margin-top: -6px;
}

＆＃13;

＆＃13;

＆＃13;

但是当我点击一些子菜单链接时，我得到了这个结果：

显示多个箭头。我试过了＆gt;在几个地方，如.bookmarks ul＆gt; li：active :: after到目前为止没有任何工作。任何想法？

＆＃13;

＆＃13;

.bookmarks ul > li:active::after
 {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(30, 64, 86, 0);
    border-left-color: #1e4056;
    border-width: 6px;
    margin-top: -6px;
}


This is my html structure, is a ul with li's, and another two ul submenus.

＆＃13;

<div class="product" id="affix-nav"> 
        <ul class="nav top-menu" id="affix-ul">
          <li class="link1">
              <a href="#"">
              Link 1
            </a>
          </li>
          <li class="link2">
            <a href="#">
              Link 2
            </a>
          </li>
          <li class="link3">
            <a href="#">
              Link 3
            </a>
          </li>
          <li class="link4">
            <div class="dbl-link-wrapper">
              <a href="#" class="left-side">
                <span>Link 4</span>
              </a>  
              <a href="#" class="arrow-up right-side" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuOne">
                <i class="fa fa-chevron-down">
                </i>
              </a> 
            </div>
            <ul id="hiddenMenuOne" class="collapse first-tree">
              <li>
                <a href="#">Sub link 1</a>
              </li>
              <li>
                <a href="#">Sub link 2</a>
              </li>
              <li>
                <a href="#">Sub link 3</a>
              </li>
              <li>
                <a href="#">Sub link 4</a>
              </li>
              <li>
                <a href="#">Sub link 5</a>
              </li>
              <li>
                <a href="#">Sub link 6</a>
              </li>
              <li class="clearfix double-btn">
                  <div class="dbl-link-wrapper">
                    <a href="#" class="nav-menu-link left-link left-side">
                    Third Level Link 1
                    </a>
                    <a href="#" class="right-side arrow-up" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuTwo">
                      <i class="fa fa-chevron-down">
                      </i>
                    </a>
                  </div>
                <ul id="hiddenMenuTwo" class="collapse second-tree">
                  <li>
                    <a href="#">Third Level Link 1</a>
                  </li>
                  <li>
                    <a href="#">Third Level Link 2</a>
                  </li>
                  <li>
                    <a href="#">Third Level Link 3</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>   
        </ul>
      </div>

＆＃13;

＆＃13;

＆＃13;