How to hover splitted button in Bootstrap 4 navbar - html

Question

For a Bootstrap 4 website I've made a navbar with splitted dropdown buttons. The leftside of the dropdown button is a normal link and the rightside is a caret button to show the submenu.
For some reason I cannot find a working CSS way to have the hover effect only on the rightside (caret) and not on the leftside (link). Is there a CSS way (without Javascript) to do this?
Thanx in advance.
You'll find the jsfiddle on https://jsfiddle.net/bnsthp57/
Update
The hover is working! The updated snippet below is ready to use. Tested on Internet Explorer 11, Crhome 79, Opera 66, Edge 44, and 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>
Navbar with splitted dropdown buttons

Answer 1

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

Answer 2

With this css it will work
#media (min-width: 768px) {
#topnav .dropdown-toggle:hover + .dropdown-menu,
#topnav .dropdown-menu:hover {
display: block;
}
#topnav .dropdown-menu:not(:hover) {
display: none;
}
}
on this dropdown nav-item
<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>