Как навести сплит кнопку в Bootstrap 4 navbar

Question

Для сайта Bootstrap 4 я сделал navbar с разделенными выпадающими кнопками. Левая сторона выпадающего меню - это обычная ссылка, а правая сторона - это кнопка каретки, чтобы показать подменю.

По какой-то причине я не могу найти работающий CSS способ иметь эффект наведения только на правой стороне ( Caret) и не на левой стороне (ссылка). Есть ли способ CSS (без Javascript) сделать это?

Спасибо заранее.

Вы найдете jsfiddle на https://jsfiddle.net/bnsthp57/

Обновление

Наведение работает! Обновленный фрагмент ниже готов к использованию. Протестировано на Inte rnet Explorer 11, Crhome 79, Opera 66, Edge 44 и Firefox 72.

#topnav .navbar-nav {
  font-size: 0rem;
}
#topnav .nav-link {
  display: inline-block;
  padding: 0.625rem 1rem;
  font-size: 1rem;
}
#topnav .dropdown-link {
  padding: 0.625rem 0.25rem;
}
#topnav .dropdown-toggle {
  padding-left: 0.25rem;
}

@media (max-width: 767.98px) {
  #topnav .navbar-nav {
    padding-top: 0.5rem;
  }
  #topnav .nav-link:first-child,
  #topnav .dropdown-link {
    display: block;
    width: calc(100% - 50px);
    padding: 0.625rem 1rem;
    border-right: 1px solid #88d;
  }
  #topnav .dropdown-toggle {
    display: block;
    width: 50px;
    padding: 0.625rem 0.5rem;
    position: absolute;
    top:0; right:0;
    text-align: center;
  }
}

@media (min-width: 768px) {
  #topnav .nav-link {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
  }
  #topnav .dropdown-link,
  #topnav .nav-item:last-child a.nav-link {
    border-right: 0;
  }
  #topnav .dropdown-menu {
    margin-top: 0;
  }
    #topnav .dropdown-toggle:hover + .dropdown-menu,
    #topnav .dropdown-menu:hover {
      display: block; /* open submenu on hover */
    }
    #topnav .dropdown-menu:not(:hover) {
      display: none; /* close submenu on not hover */
    }
}

/* navbar theme */

#navbar,
#navbar .navbar-toggler {
  color: #fff;
  background-color: #1c8cbc;
  border-color: #1f90bb #1f90bb #145e7a;
}
#navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
#topnav .nav-link {
  color: #fff;
  background-color: transparent;
  font-weight: 600;
}
#topnav .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
#topnav .dropdown-menu,
#topnav .dropdown-item,
#topnav .dropdown-item:focus {
  color: #fff;
  background-color: #0c7cac;
}
#topnav .dropdown-item.active {
  color: #ff6;
  background-color: #0c7cac;
  font-weight: 600;
}
#topnav .dropdown-item:hover,
#topnav .dropdown-item:active {
  color: #fff;
  background-color: #1383af;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-expand-md mr-auto">
  <div class="container">
  <button class="navbar-toggler" type="button" data-toggle="collapse"
    data-target="#topnav" aria-controls="topnav" aria-expanded="false"
    aria-label="Toggle menu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="topnav">
    <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="#pagelink">Home</a>
    </li>
    <li class="nav-item dropdown active">
      <a class="nav-link dropdown-link" href="#pagelink">Magazine</a>
      <a class="nav-link dropdown-toggle" href="#" id="navlink01" role="button"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
      <div class="dropdown-menu" aria-labelledby="navlink01">
        <a class="dropdown-item" href="#pagelink">Sub item 1</a>
        <a class="dropdown-item active" href="#pagelink">Sub item 2</a>
        <a class="dropdown-item" href="#pagelink">Sub item 3</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="index.php">Portfolio</a>
    </li>
    </ul>
  </div>
  </div>
</nav>

Навбар с разделенными выпадающими кнопками

Answer 1

С этим css он будет работать

@media (min-width: 768px) {
  #topnav .dropdown-toggle:hover + .dropdown-menu,
  #topnav .dropdown-menu:hover {
    display: block;
  }
  #topnav .dropdown-menu:not(:hover) {
    display: none;
  }
}

на этом выпадающем элементе навигации

<li class="nav-item dropdown active">
  <a class="nav-link dropdown-link" href="#pagelink">Magazine</a>
  <a class="nav-link dropdown-toggle" href="#" id="navlink01" role="button"
  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
  <div class="dropdown-menu" aria-labelledby="navlink01">
    <a class="dropdown-item" href="#pagelink">Sub item 1</a>
    <a class="dropdown-item active" href="#pagelink">Sub item 2</a>
    <a class="dropdown-item" href="#pagelink">Sub item 3</a>
  </div>
</li>

Answer 2

.dropdown-toggle:hover + .dropdown-menu{
  display:block;
}