How to remove on hover from ::before tag

Question

I have created a drop down style menu using scss and bootstrap. I have been able to set everything up as required with one issue.

When hovering over the arrow on top of the drop down menu it highlights the arrow, I don't want this to happen. The arrow should only highlight when the first menu item is on hover.

How could I fix this? See codepen link : https://codepen.io/duodice/pen/NJJXYJ

(images don't load that's fine as they're local files)

To replicate the problem : 1. Hover over "Services" on navbar 2. Hover over small triangle at the top of drop down menu

The scss :

$pop-up-menu-bg-clr : white;
$pop-up-menu-shade-clr : #B0c1d3;
$pop-up-menu-font-clr : #1b2b43;


.pop-up-menu-container {
  position: relative;

  li:hover {
    .pop-up-menu-list {
      display: block;
    }

  }
}

.pop-up-menu-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding-top: 1.5rem;
  background-color: transparent;
  z-index: 999;


  li a {
    transition: none !important;
    display: block;
    color: $pop-up-menu-font-clr;
    text-align: left;
    background-color: $pop-up-menu-bg-clr;
    width: 100%;
    padding: 1rem;

    &:hover {
      background-color: $pop-up-menu-shade-clr;
      color: white;
    }

    img {
      height: 80%;
    }

    p {
      color: $pop-up-menu-font-clr;
      font-size: 13px;
      margin-bottom: 0;
    }
  }

  li:first-child {
    position: relative;
    z-index: 998;

    &:hover {
      border-bottom-color: y
    }

    a {
      border-radius: 15px 15px 0 0;
    }

    &:before {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      border: 1rem solid transparent;
      border-bottom-color: $pop-up-menu-bg-clr;
      top: 0;
      left: 30%;
      margin-top: calc(-2rem + 1px);
    }

    &:hover:before {
      border-bottom-color: $pop-up-menu-shade-clr;
    }

  }

  li:last-child a {
    border-radius: 0 0 15px 15px;
  }

}

Html :

<!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" id="sidebarCollapse" data-toggle="collapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end">
                <ul class="navbar-nav pop-up-menu-container">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Services</a>
                        <ul class="pop-up-menu-list list-unstyled">
                            <li>
                                <a href="#">
                                    <div class="row">
                                        <div class="col-2 mr-2">
                                            <img src="wwwroot/images/icons/settings.svg">
                                        </div>
                                        <div class="col">
                                            All Services
                                            <p>Learn more about our services</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="row">
                                        <div class="col-2 mr-2">
                                            <img src="wwwroot/images/icons/web_development_devices.svg">
                                        </div>
                                        <div class="col">
                                            Web Development
                                            <p>Design & Development</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="row">
                                        <div class="col-2 mr-2">
                                            <img src="wwwroot/images/icons/hosting_cloud.svg">
                                        </div>
                                        <div class="col">
                                            Hosting & Maintenance
                                            <p>Store your site online</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="row">
                                        <div class="col-2 mr-2">
                                            <img src="wwwroot/images/icons/marketing_growth.svg">
                                        </div>
                                        <div class="col">
                                            Digital Marketing
                                            <p>Get more visitors today</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Disabled</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Thanks.

Answer 1

You set hover to li of first child without a (as you set to rest of li):

Change it to li a:hover:

See working code

li:first-child {
    position: relative;
    z-index: 998;

    a:hover {
      border-bottom-color: y
    }

    a {
      border-radius: 15px 15px 0 0;
    }

    a:before {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      border: 1rem solid transparent;
      border-bottom-color: $pop-up-menu-bg-clr;
      top: 0;
      left: 30%;
      margin-top: calc(-2rem + 1px);
    }

    a:hover:before {
      border-bottom-color: $pop-up-menu-shade-clr;
    }

  }