Треугольник на css. Border закрывает другие блоки

.menu__item { 
  display:inline-block; 
  width: 100px; 
  height: 30px; 
  background-color:red; 
  text-align:center; 
   
} 
 
.menu__item-link { 
  display: inline-block; 
  width: 100%; 
  height: 100%; 
} 
.menu__item-activ{ 
  position:relative; 
} 
.menu__item-activ:after { 
 
} 
 
.submenu { 
  position: absolute; 
  background-color:#efefef; 
} 
 
.submenu:before { 
     content: '';  
    position: absolute; /* Абсолютное позиционирование */ 
    left: 0;  
    top:0; 
    border: 50px solid transparent; /* Прозрачные границы */ 
    border-top: 10px solid green; /* Добавляем треугольник */ 
    pointer-events:none; /* решение */ 
} 
/*для наглядности*/ 
.submenu a:hover{ 
  color:red; 
}

<ul class="menu__list"> 
  <li class="menu__item"><a href="" class="menu__item-link">Home</a></li> 
  <li class="menu__item menu__item-activ"> 
    <a href="" class="menu__item-link">About</a> 
    <ul class="submenu"> 
      <li class="submenu-item"> <a href="" class="submenu-link">submenu1</a> </li> 
      <li class="submenu-item"><a href="" class="submenu-link">submenu2</a></li> 
      <li class="submenu-item"><a href="" class="submenu-link">submenu3</a></li> 
    </ul> 
  </li> 
  <li class="menu__item"><a href="" class="menu__item-link">Catalog</a></li> 
</ul>