How to display DropDown just by sliding the mouse over the content?

Navigation
1

I would like to know how I can display this dropdown without the user having to click to have their content accessed, just by dragging the mouse over MSDNAA-Microsft, for example. 

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      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>
    
asked by anonymous 17.05.2018 / 16:45

2 answers

1

In the new bootstrap hovering system has been removed

link

One way you can put this option again is by adding the following line of code to your CSS 

.dropdown:hover>.dropdown-menu {
     display: block;
}
    
17.05.2018 / 16:55
0

You can only do this in% with% yes. You need to get the CSS from when it is active and put it in :hover toggler . There you have this rule in css :hover

Look at the model below as it looks after it's done. Also notice that you do not even need javascript

OBS 1: I took the liberty of tinkering with style. I left the comments in the CSS code. If you are going to use this drop in other situations I advise you to use new classes and not edit the Bootstrap default ... 

.dropdown:hover .dropdown-menu {
    display: block;
    position: absolute;
    transform: translate3d(5px, 28px, 0px); /* distancia entre menu e btn */
    top: 0px;
    left: 0px;
    will-change: transform;
}
.dropdown {
    display: inline-block; /* deixa o LO do "tamanho do próprio texto" e não da largura inteira da tela*/
    list-style: none; /* rita a "bolinha" do LI*/
}
<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>

OBS 2: I had to get some default Bootstrap dropmenus attributes so it will not be clickable anymore.

    
17.05.2018 / 17:05
Problem with code in Java Select only ONE checkbox with vanilla javascript and bootstrap 4