title: How to create a dropdown submenu on hover in Bootstrap 4.1?
body: <p>I am working on a website in which I want to create a dropdown submenu on hover in <a href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="noreferrer">Bootstrap 4.1</a> </p>
  
  <p>The HTML code which I have used in order to create a dropdown menu on hover are:</p>
  
  <pre><code>&lt;div class="navbar-collapse text-center" id="navbarResponsive"&gt;
    &lt;ul class="navbar-nav ml-auto"&gt;
  
      &lt;li class="nav-item dropdown"&gt;
        &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        main menu
      &lt;/a&gt;
        &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
          &lt;a class="dropdown-item" href="#"&gt;A&lt;/a&gt;
          &lt;a class="dropdown-item" href="#"&gt;B&lt;/a&gt;
          &lt;a class="dropdown-item" href="#"&gt;C&lt;/a&gt;
          &lt;a class="dropdown-item" href="#"&gt;D&lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
  
      &lt;button type="submit" onclick="location.href='/M';" class="btn btn-default"&gt;R&lt;/button&gt;
  
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br><br>
  <strong>Problem Statement:</strong></p>
  
  <p>I am wondering what changes I should make in the code above so that on  <strong>hover of D; dropdown items E, F, G, H, are shown</strong>. </p>