title: Full width dropdown menu
body: <p>I have a dropdown menu, that when opened I need it to stretch the full length of the container, i'm using twitter bootstrap, currently it sits like in the image <a href="https://i.stack.imgur.com/SQ8bu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SQ8bu.png" alt="Dropwdown menu"></a></p>
  
  <p>Here is the html </p>
  
  <pre><code>&lt;ul id="multicol-menu" class="nav navbar-nav pull-right"&gt;
  
  &lt;li class="dropdown"&gt;
      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Stay Connected &lt;/a&gt;
     &lt;ul class="dropdown-menu"&gt;
          &lt;div clas="row"&gt;
          &lt;li&gt;
              &lt;div class="row"&gt;
                  &lt;ul class="list-unstyled col-md-2"&gt;
                      &lt;p class="submenu-title"&gt;TITLE&lt;/p&gt;
                      &lt;li&gt;&lt;a href="#"&gt;test1-1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;test1-2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;test1-3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="list-unstyled col-md-2"&gt;
                      &lt;p class="submenu-title"&gt;TITLE&lt;/p&gt;
                      &lt;li&gt;&lt;a href="#"&gt;test2-1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;test2-2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;test2-3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="list-unstyled col-md-2"&gt;
                      &lt;p class="submenu-title"&gt;TITLE&lt;/p&gt;
                      &lt;li&gt;&lt;a href="#"&gt;test3-1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;test3-2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;test3-3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="list-unstyled col-md-2"&gt;
                      &lt;p class="submenu-title"&gt;TITLE&lt;/p&gt;
                      &lt;li&gt;&lt;a href="#"&gt;test3-1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;test3-2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;test3-3&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
                  &lt;ul class="list-unstyled col-md-4"&gt;
                      &lt;a href="#myModal" role="button" data-toggle="modal"&gt;
                          &lt;img src="img/book-now-block.png" /&gt;
                      &lt;/a&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;/div&gt;
      &lt;/ul&gt; 
  &lt;/li&gt;
  </code></pre>