Position sticky with submenu not scrolling

Question

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:

li.dropdown:hover>.dropdown-menu {
  display: block;
}

li.dropdown {
  position: static;
}

.multi-columns {
  width: 100%;
}

<div class="nav-wrapper sticky-top">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light text-uppercase">
      <a class="navbar-brand" href="/"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="blog.html">Blog</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="eshop.html">E-shop</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu multi-columns">
              <div class="row">
                <div class="col-md-3">
                  <h3 class="h5">Blog</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-md-3">
                  <h3 class="h5">Blog 2</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-md-3">
                  <h3 class="h5">Blog 3</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-md-3">
                  <h3 class="h5">Blog 4</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <form action="" class="form-inline">
          <select class="select2 form-control" style="width: 100%;">
    
              </select>
        </form>
      </div>
    </nav>
    <!-- /.nav -->
  </div>
  <!-- /.container -->
</div>
<!-- /.nav-wrapper -->

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?

Edit

The main thing is the submenu is greater than viewport and then I simply cant scroll on that

Answer 1

If you need your sub-menu want to scroll inside the content, for that you need to specify the max-height and overflow: scroll;.

You also need to change col-md-3 to col-lg-3 inside the dropdown-menu multi-columns division.

CSS

@media (max-width: 991px){
.multi-columns{
  max-height: 300px;
  overflow: auto;
     }
  }

Demo Snippet:

li.dropdown:hover>.dropdown-menu {
  display: block;
}

li.dropdown {
  position: static;
}

.multi-columns {
  width: 100%;
}
@media (max-width: 991px){
.multi-columns{
  max-height: 300px;
  overflow: auto;
     }
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>


<div class="nav-wrapper sticky-top">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light text-uppercase">
      <a class="navbar-brand" href="/"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="blog.html">Blog</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="eshop.html">E-shop</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu multi-columns">
              <div class="row">
                <div class="col-lg-3">
                  <h3 class="h5">Blog</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-lg-3">
                  <h3 class="h5">Blog 2</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-lg-3">
                  <h3 class="h5">Blog 3</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-lg-3">
                  <h3 class="h5">Blog 4</h3>
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <form action="" class="form-inline">
          <select class="select2 form-control" style="width: 100%;">
    
              </select>
        </form>
      </div>
    </nav>
    <!-- /.nav -->
  </div>
  <!-- /.container -->
</div>
<!-- /.nav-wrapper -->

Hope this may help you. Codepen demo link. Thanks.