CSS Menu Help

I need some CSS help. There are two things I would like to achieve, but I’ve so far been unsuccessful.
Link to Site: https://hn.k12.oh.us/testsite/district/

1. When I hover over the horizontal menu (primary menu) items I want a triangle to appear. I’ve achieved this in the vertical menu, but cannot get it to display in the horizontal menu. I’d like it to be similar to what’s going on with the vertical menu. I’m using the following code.

#primary-menu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f7df2b;
  margin-left: -10px;
}

2. I’d like the triangle to display on the currently active menu item. I can’t get this to work for either the horizontal or vertical menu. I’ve tried what’s above with the following css:
#primary-menu > ul > li.active a {