title: Semantic UI full width menu dropdown
body: <p>How is it possible to create a menu with full width dropdown items (mega menu)?
  I'm trying to build a menu like this <a href="http://tympanus.net/Blueprints/HorizontalDropDownMenu/" rel="nofollow">example</a>
  I have tried to utilize Semantic UIs popups, but this only works for the first menu item (Error: "Popup does not fit within the boundaries of the viewport").
  I would prefeer a solution using dropdowns instead, but they are don't use the full width of the screen.</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-js lang-js prettyprint-override"><code>$('#menu1')
    .popup({
      popup: '#menucontent1',
      hoverable: true
    });
    
      $('#menu2')
    .popup({
      popup: '#menucontent2',
      hoverable: true
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"&gt;&lt;/script&gt;
  &lt;div class="ui secondary pointing menu"&gt;
    &lt;a class="browse item" id="menu1"&gt;
      Item 1&lt;/a&gt;
    &lt;a class="browse item" id="menu2"&gt;
      Item 2&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="ui fluid popup bottom left transition hidden" id="menucontent1"&gt;
    &lt;div class="ui four column relaxed equal height divided grid"&gt;
      &lt;div class="column"&gt;
        &lt;h4 class="ui header"&gt;Fabrics&lt;/h4&gt;
        &lt;div class="ui link list"&gt;
          &lt;a class="item"&gt;Viscose&lt;/a&gt;
        &lt;/div&gt;
        &lt;h4 class="ui header"&gt;Fabrics Level 2&lt;/h4&gt;
        &lt;div class="ui link list"&gt;
          &lt;a class="item"&gt;Cashmere&lt;/a&gt;
          &lt;a class="item"&gt;Linen&lt;/a&gt;
          &lt;a class="item"&gt;Cotton&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
        &lt;h4 class="ui header"&gt;Size&lt;/h4&gt;
        &lt;div class="ui link list"&gt;
          &lt;a class="item"&gt;Small&lt;/a&gt;
          &lt;a class="item"&gt;Medium&lt;/a&gt;
          &lt;a class="item"&gt;Large&lt;/a&gt;
          &lt;a class="item"&gt;Plus Sizes&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
        &lt;h4 class="ui header"&gt;Colored&lt;/h4&gt;
        &lt;div class="ui link list"&gt;
          &lt;a class="item"&gt;Neutrals&lt;/a&gt;
          &lt;a class="item"&gt;Brights&lt;/a&gt;
          &lt;a class="item"&gt;Pastels&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
        &lt;h4 class="ui header"&gt;Types&lt;/h4&gt;
        &lt;div class="ui link list"&gt;
          &lt;a class="item"&gt;Knitwear&lt;/a&gt;
          &lt;a class="item"&gt;Outerwear&lt;/a&gt;
          &lt;a class="item"&gt;Pants&lt;/a&gt;
          &lt;a class="item"&gt;Shoes&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ui fluid popup bottom left transition hidden" id="menucontent2"&gt;
    &lt;div class="ui four column relaxed equal height divided grid"&gt;
      &lt;div class="column"&gt;
        &lt;h4 class="ui header"&gt;Fabrics&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
        
      &lt;/div&gt;
      &lt;div class="column"&gt;
        
      &lt;/div&gt;
      &lt;div class="column"&gt;
        
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>