É possível fazer só no `:hover` sim. Vc precisa pegar o CSS de quando ele está ativo e coloca no `:hover` do *toggler*. Ai vc faz essa regra no css `.dropdown-toggle:hover + .dropdown-menu { }` Veja no modelo abaixo como fica depois de pronto. Repare também que dessa forma nem precisa de *javascript* **OBS 1:** Tomei a liberdade de mexer um pouco no estilo. Deixei os comentário no código do CSS. Se vc for usar esse Drop em outras situações aconselho usar classes novas e não editar as default do Bootstrap... <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .dropdown-toggle:hover + .dropdown-menu { display: block; position: absolute; transform: translate3d(5px, 32px, 0px); /* contrala a distância do dropmenu do texto do btn*/ top: 0px; left: 0px; will-change: transform; } .dropdown-toggle { display: inline-block; /* deixa o A do "tamanho do próprio texto" e não da largura inteira da tela*/ } .dropdown { list-style: none; /* rita a "bolinha" do LI*/ } <!-- language: lang-html --> <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" /> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" > MSDNAA-Microsoft </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Suporte MSDNAA</a> <a class="dropdown-item" href="https://login.microsoftonline.com/" target="_blank">E-Mail</a> <a class="dropdown-item" href="https://fatec.onthehub.com/WebStore/Welcome.aspx" target="_blank">Microsoft Imagine</a> </div> </li> <!-- end snippet --> **OBS 2:** Tive que tirar alguns atributos padrão dos *dropmenus* do Bootstrap para ele não ser mais clicável ok.