title: Position sticky with submenu not scrolling
body: <p>I am using bootstrap v-4 beta2 and I want to create sticky top menu with submenu. Everything is working on desktop but when on mobile when I click to open submenu I cant see whole submenu and when I am scrolling with whole website but not menu. I found out I have to do something with li.dropdown - when I added position absolute it got a bit messy but I saw the menu. But I cant get what I should do. Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li.dropdown:hover&gt;.dropdown-menu {
    display: block;
  }
  
  li.dropdown {
    position: static;
  }
  
  .multi-columns {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav-wrapper sticky-top"&gt;
    &lt;div class="container"&gt;
      &lt;nav class="navbar navbar-expand-lg navbar-light text-uppercase"&gt;
        &lt;a class="navbar-brand" href="/"&gt;&lt;/a&gt;
        &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
            &lt;/button&gt;
        &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="index.html"&gt;Domov &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="blog.html"&gt;Blog&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link" href="eshop.html"&gt;E-shop&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item dropdown"&gt;
              &lt;a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"&gt;Dropdown&lt;/a&gt;
              &lt;div class="dropdown-menu multi-columns"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-3"&gt;
                    &lt;h3 class="h5"&gt;Blog&lt;/h3&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                    &lt;h3 class="h5"&gt;Blog 2&lt;/h3&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                    &lt;h3 class="h5"&gt;Blog 3&lt;/h3&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                    &lt;h3 class="h5"&gt;Blog 4&lt;/h3&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;form action="" class="form-inline"&gt;
            &lt;select class="select2 form-control" style="width: 100%;"&gt;
      
                &lt;/select&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;!-- /.nav --&gt;
    &lt;/div&gt;
    &lt;!-- /.container --&gt;
  &lt;/div&gt;
  &lt;!-- /.nav-wrapper --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also when on desktop when I hover on the "dropdown" it gets shown but by the time I get the mouse on the submenu it disapears. Should I move the submenu with margin-top: -10px or smh like that? Or is there any solution?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>The main thing is the submenu is greater than viewport and then I simply cant scroll on that</p>