Semantic UI full width menu dropdown

Question

How is it possible to create a menu with full width dropdown items (mega menu)? I'm trying to build a menu like this example 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.

$('#menu1')
  .popup({
    popup: '#menucontent1',
    hoverable: true
  });
  
    $('#menu2')
  .popup({
    popup: '#menucontent2',
    hoverable: true
  });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<div class="ui secondary pointing menu">
  <a class="browse item" id="menu1">
    Item 1</a>
  <a class="browse item" id="menu2">
    Item 2</a>
</div>
<div class="ui fluid popup bottom left transition hidden" id="menucontent1">
  <div class="ui four column relaxed equal height divided grid">
    <div class="column">
      <h4 class="ui header">Fabrics</h4>
      <div class="ui link list">
        <a class="item">Viscose</a>
      </div>
      <h4 class="ui header">Fabrics Level 2</h4>
      <div class="ui link list">
        <a class="item">Cashmere</a>
        <a class="item">Linen</a>
        <a class="item">Cotton</a>
      </div>
    </div>
    <div class="column">
      <h4 class="ui header">Size</h4>
      <div class="ui link list">
        <a class="item">Small</a>
        <a class="item">Medium</a>
        <a class="item">Large</a>
        <a class="item">Plus Sizes</a>
      </div>
    </div>
    <div class="column">
      <h4 class="ui header">Colored</h4>
      <div class="ui link list">
        <a class="item">Neutrals</a>
        <a class="item">Brights</a>
        <a class="item">Pastels</a>
      </div>
    </div>
    <div class="column">
      <h4 class="ui header">Types</h4>
      <div class="ui link list">
        <a class="item">Knitwear</a>
        <a class="item">Outerwear</a>
        <a class="item">Pants</a>
        <a class="item">Shoes</a>
      </div>
    </div>
  </div>
</div>
<div class="ui fluid popup bottom left transition hidden" id="menucontent2">
  <div class="ui four column relaxed equal height divided grid">
    <div class="column">
      <h4 class="ui header">Fabrics</h4>
    </div>
    <div class="column">
      
    </div>
    <div class="column">
      
    </div>
    <div class="column">
      
    </div>
  </div>
</div>

Answer 1

you don't need jQuery for that, not even javascript: I made a small Fiddle for it:

<div class="ui secondary pointing menu">
    <ul class="menu">
        <li>
            <a class="browse item" id="menu1" data-target="#menucontent1">
                Item 1</a>
            <div class="popup" id="menucontent1">
                <div class="ui four column relaxed equal height divided grid">
                    <div class="column">
                        <h4 class="ui header">Fabrics</h4>
                        <div class="ui link list">
                            <a class="item">Viscose</a>
                        </div>
                        <h4 class="ui header">Fabrics Level 2</h4>
                        <div class="ui link list">
                            <a class="item">Cashmere</a>
                            <a class="item">Linen</a>
                            <a class="item">Cotton</a>
                        </div>
                    </div>
                    <div class="column">
                        <h4 class="ui header">Size</h4>
                        <div class="ui link list">
                            <a class="item">Small</a>
                            <a class="item">Medium</a>
                            <a class="item">Large</a>
                            <a class="item">Plus Sizes</a>
                        </div>
                    </div>
                    <div class="column">
                        <h4 class="ui header">Colored</h4>
                        <div class="ui link list">
                            <a class="item">Neutrals</a>
                            <a class="item">Brights</a>
                            <a class="item">Pastels</a>
                        </div>
                    </div>
                    <div class="column">
                        <h4 class="ui header">Types</h4>
                        <div class="ui link list">
                            <a class="item">Knitwear</a>
                            <a class="item">Outerwear</a>
                            <a class="item">Pants</a>
                            <a class="item">Shoes</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <a class="browse item" id="menu2" data-target="#menucontent2">
                Item 2</a>
            <div class="popup" id="menucontent2">
                <div class="ui four column relaxed equal height divided grid">
                    <div class="column">
                        <h4 class="ui header">Fabrics</h4>
                    </div>
                    <div class="column">

                    </div>
                    <div class="column">

                    </div>
                    <div class="column">

                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

and the css:

.menu {
    list-style: none;
}
.menu li {
    float: left;
    margin-right: 1em;
}
.popup {
    background-color: #fff;
    position: absolute;
    border-radius: 5px;
    border: 1px solid grey;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    padding: 1em;
}

.item:hover~div {
    opacity: 1;
}