Full width bootstrap dropdown
<p>I´m trying to make a Bootstrap menu similar to the menu in this page..<a href="https://makr.com/" rel="nofollow">https://makr.com/</a></p>

<p>This is what I have come up with and I´m pretty much stuck at the moment.</p>

<p>How I can make the dropdown text appear beneath each dropdown button like it is on the <a href="https://makr.com/" rel="nofollow">https://makr.com/</a></p>

<p>index.html</p>

<pre><code> &lt;div class="navbar navbar-inverse"&gt;
   &lt;!-- Header --&gt;
   &lt;div class="navbar-header"&gt;
      &lt;button type="button" class="navbar-toggle" 
         data-toggle="collapse" 
         data-target=".navbar-collapse"&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class="navbar-brand" href="#"&gt;
      Bootstrap 3 Skeleton
      &lt;/a&gt;
   &lt;/div&gt;
   &lt;!-- Navbar Links --&gt;
   &lt;div class="collapse navbar-collapse"&gt;
      &lt;ul class="nav navbar-nav"&gt;
         &lt;li class="dropdown full-width"&gt;
            &lt;a href="#" class="dropdown-toggle" 
               data-toggle="dropdown"&gt;
            Full Width &lt;span class="caret"&gt;&lt;/span&gt;
            &lt;/a&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
               &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
                  &lt;/a&gt;
               &lt;/li&gt;
               &lt;li class="divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
               &lt;li class="divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
         &lt;li class="dropdown full-width"&gt;
            &lt;a href="#" class="dropdown-toggle" 
               data-toggle="dropdown"&gt;
            Full Width &lt;span class="caret"&gt;&lt;/span&gt;
            &lt;/a&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
               &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
                  &lt;/a&gt;
               &lt;/li&gt;
               &lt;li class="divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
               &lt;li class="divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
         &lt;li class="dropdown full-width"&gt;
            &lt;a href="#" class="dropdown-toggle" 
               data-toggle="dropdown"&gt;
            Full Width &lt;span class="caret"&gt;&lt;/span&gt;
            &lt;/a&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
               &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
                  &lt;/a&gt;
               &lt;/li&gt;
               &lt;li class="divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
               &lt;li class="divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>custom.css</p>

<pre><code>.full-width.dropdown {
    position: static; 
}
.full-width.dropdown &gt; .dropdown-menu {
    position: static;
    right: 0;
    left: 0;
}
.full-width.dropdown &gt; .dropdown-menu &gt; li &gt; a {
    white-space: normal; 
}
.fill-width.dropdown {
     position: static;
 }
.fill-width.dropdown &gt; .dropdown-menu {
    position: absolute;
    left: auto;
}
.fill-width.dropdown &gt; .dropdown-menu &gt; li &gt; a {
    white-space: normal; 
}
</code></pre>

<p>javascript</p>

<pre><code>$('.dropdown').hover(
    function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
    }, 
    function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
    }
);
$('.dropdown-menu').hover(
    function() {
        $(this).stop(true, true);
    },
    function() {
        $(this).stop(true, true).delay(200).fadeOut();
    }
);
</code></pre>