Как убрать при наведении указатель от :: before

Question

Я создал выпадающее меню стиля, используя scss и bootstrap. Я был в состоянии настроить все как требуется с одной проблемой.

При наведении курсора на стрелку в верхней части выпадающего меню она выделяет стрелку, я не хочу, чтобы это произошло. Стрелка должна выделяться только тогда, когда первый элемент меню находится при наведении курсора.

Как я мог это исправить? Смотрите ссылку на codepen: https://codepen.io/duodice/pen/NJJXYJ

(изображения не загружаются, это нормально, поскольку они локальные файлы)

Чтобы повторить проблему: 1. Наведите указатель мыши на «Службы» на панели навигации. 2. Наведите курсор на маленький треугольник в верхней части выпадающего меню

Ссс:

$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>

Спасибо.

Answer 1

Вы устанавливаете hover на li первого ребенка без a (в качестве значения покоя li):

Измените его на li a:hover:

См. Рабочий код

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;
    }

  }