Html 语义UI全宽菜单下拉列表

如何创建具有全宽下拉项的菜单（mega菜单）？ 我正试图建立一个这样的菜单 我曾尝试使用语义UI弹出窗口，但这仅适用于第一个菜单项（错误：“弹出窗口不适合视口的边界”）。 我会使用下拉菜单来预先选择一个解决方案，但它们不会占用整个屏幕的宽度

$（“#菜单1”）
.弹出窗口({
弹出窗口：“#菜单内容1”，
可悬停：正确
});
$（“#菜单2”）
.弹出窗口({
弹出窗口：“#菜单内容2”，
可悬停：正确
});

项目1
项目2
织物
粘胶
织物等级2
羊绒
亚麻布
棉
大小
小的
中等
大的
加号
有色的
中立者
明亮的
蜡笔
类型
针织品
外衣
裤子
鞋
织物
您不需要jQuery，甚至不需要javascript：
我为它做了一把小小提琴：

<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>

非常感谢。我觉得太复杂了。我想我将依靠javascript来更改活动类和打开/关闭行为（悬停/单击），但您的回答给了我正确的方向。很高兴我能提供帮助：-）我的解决方案基于@MarouenMhiris answer。
.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;
}