title: How to move the sub-menu drop-down items towards right on hover in Bootstrap 4.1?
body: <p>I am working on a <a href="http://ferhan.ferohost.com/" rel="nofollow noreferrer">website</a> in which the <strong>submenu dropdown items appears at the bottom</strong> as shown below. </p>
  
  <p><a href="https://i.stack.imgur.com/BuYJi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BuYJi.png" alt="enter image description here"></a></p>
  
  <p><br></p>
  
  <p>The HTML/CSS code which I have used for that are as follows:</p>
  
  <p><strong>HTML Code:</strong></p>
  
  <pre><code>&lt;div class="navbar-collapse text-center" id="navbarResponsive"&gt;
  &lt;ul class="navbar-nav ml-auto"&gt;
  &lt;!-- 
     &lt;button type="submit" onclick="location.href='/prostore';" class="btn btn-default"&gt;Hello World&lt;/button&gt;
      --&gt;
  &lt;li class="menu-item 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;about&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;blog&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;contact us&lt;/a&gt;
        &lt;div class="submenu-item"&gt;
           &lt;a class="dropdown-item dropdown-toggle dropright" href="#" id="navbarDropdownSubMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
           Social
           &lt;/a&gt;
           &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownSubMenuLink"&gt;
              &lt;a class="dropdown-item" href="#"&gt;T&lt;/a&gt;
              &lt;a class="dropdown-item" href="#"&gt;U&lt;/a&gt;
              &lt;a class="dropdown-item" href="#"&gt;V&lt;/a&gt;
              &lt;a class="dropdown-item" href="#"&gt;W&lt;/a&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS code:</strong></p>
  
  <pre><code>.menu-item:hover &gt; .dropdown-menu {
    display: block;
  }
  
  /* makes sub-menu S open on hover */
  .submenu-item:hover &gt; .dropdown-menu {
    display: block;
  }
  </code></pre>
  
  <p><br><br>
  <strong>Problem Statement:</strong></p>
  
  <p>I am wondering what changes I should make in the HTML/CSS above so that <strong>if we hover on Social, the drop-down items T, U, V and W are displayed towards the right similar to <a href="https://www.codeply.com/go/ji5ijk6yJ4" rel="nofollow noreferrer">this</a></strong> </p>