title: expand dropdown menu with uikit
body: <p>This code is written for navbar using Uikit Css Framework.In navbar there is one dropdown list. when i clicked dropdown list it only show the content of middle section.but i want to show that  dropdown list content with full container.
  What would be the best possible method to show the  dropdown list with full container.</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-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet"/&gt;
      &lt;div class="uk-card uk-card-default " style="z-index: 980;" uk-sticky="bottom: #offset"&gt;
          &lt;div class="uk-container uk-container-expand uk-box-shadow-medium" id="nav-wrapper"&gt;        
              &lt;nav class="uk-navbar-container" uk-navbar id="navbar"&gt;
                  &lt;div class="uk-navbar-left"&gt;
                      &lt;a class="uk-navbar-toggle uk-hidden@l" href="#" uk-toggle="target: #offcanvas-nav"&gt;
                      &lt;span uk-navbar-toggle-icon&gt;&lt;/span&gt; &lt;span class="uk-margin-small-left"&gt;&lt;/span&gt;
                  &lt;/a&gt;
  
                  
                  &lt;ul id="menu1" class="uk-navbar-nav"&gt;
                      &lt;a class="uk-navbar-item uk-logo" href="#"&gt;&lt;img src="{{asset('img/logo.png')}}" alt=""&gt;&lt;/a&gt;
                      &lt;li class="uk-active"&gt;&lt;a href="/"&gt;link&lt;/a&gt;&lt;/li&gt;
  
  
  
   
  
      &lt;!-- This is the dropdown --&gt;
      &lt;li class=""&gt;&lt;a class="menu-full-width" href="#"&gt;dropdown&lt;/a&gt;
      &lt;div class=" uk-dropdown uk-dropdown-navbar uk-dropdown-width-4" data-uk-dropdown="{justify:'#menu2'}"&gt;
        &lt;div class="uk-grid uk-dropdown-grid"&gt;
          &lt;div class="uk-width-1-4"&gt;
            &lt;ul class="uk-nav uk-nav-navbar uk-container uk-container-expand"&gt;
              &lt;li class="uk-parent"&gt;&lt;a href="#"&gt;Showcase Grid &lt;/a&gt;
                &lt;ul class="uk-nav-sub"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 6&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="uk-width-1-4"&gt;
            &lt;ul class="uk-nav uk-nav-navbar"&gt;
              &lt;li class="uk-parent"&gt;&lt;a href="#"&gt;Showcase Masonry&lt;/a&gt;
                &lt;ul class="uk-nav-sub"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 6&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="uk-width-1-4"&gt;
            &lt;ul class="uk-nav uk-nav-navbar"&gt;
              &lt;li class="uk-parent"&gt;&lt;a href="#"&gt;Portfolio Grid&lt;/a&gt;
                &lt;ul class="uk-nav-sub"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 6&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="uk-width-1-4"&gt;
            &lt;ul class="uk-nav uk-nav-navbar"&gt;
              &lt;li class="uk-parent"&gt;&lt;a href="#"&gt;Portfolio Mosaic&lt;/a&gt;
                &lt;ul class="uk-nav-sub"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Column 6&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/li&gt;
      &lt;!-- end dropdown --&gt;
                      &lt;li&gt;&lt;a href="#"&gt;item1&lt;/a&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;a href="#"&gt;item2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;item3&lt;/a&gt;&lt;/li&gt;
                               &lt;li&gt;&lt;a href="#"&gt;item4&lt;/a&gt;&lt;/li&gt;
                               &lt;li&gt;&lt;a href="#"&gt;item5&lt;/a&gt;&lt;/li&gt; 
                               &lt;li&gt;&lt;a href="#"&gt;item6&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>