在样式后悬停在ul子元素效果ul上

$('.secondary>li:first-child>a').mouseover(function(){
  $('.secondary').addClass('hover');
  //You can write whatever you want in here
});
$('.secondary>li:first-child>a').mouseout(function(){
  $('.secondary').removeClass('hover');
  //You can write whatever you want in here
});

ul.secondary:after {
  content:"";
  border-color: #f3f4f1 transparent;
  border-width: 0 8px 8px;
  right: 11px;
  top: 0;
  left: 0;
  border-style: solid;
  position: absolute;
}
ul.secondary li:first-child a:hover {
  color: red;
}
ul.secondary.hover:after {
    border-color: red transparent;
}
ul.secondary.hover>li{
   color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul class="primary">
  <li>
    <ul class="secondary">
      <li><a href="">hover me makes ":after" change border color</a> </li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
    </ul>
  </li>
</ul>