Javascript 列表和下拉列表的问题

大家好，我的社区。我需要你帮我整理我的名单。我需要做这样的事情：

如您所见，按下按钮后，复选框列表下拉。我怎样才能像图中那样全宽下拉？很长一段时间，我做了一个类似的东西，但我不知道如何制作全宽，以便其他按钮向下移动。这是我在JSFIDLE中的代码：

因此，为了确保我需要的ul>a的大小与它的大小相同，但ul>li将是全宽的，并按下其他按钮。 Html:

---

@odedta哈哈。我需要我的ul>a尺寸和它一样大，但ul>li是全宽的，然后按下其他按钮：很好。他，我真的不知道你想做什么，你能画个草图吗？据我所知，你有一个导航菜单，其中一个项目是一个全宽菜单，当它打开时，它会推送下面的所有内容，对吗？你能创建一个没有涂鸦的图像，这样我们就可以看到正在发生的事情吗？这里是图像

<div class="categ-list">
    <ul class="col-md-4 parent">
        <a href="#">Menu link</a>
        <li>
            <a href="#">Menu link</a>
        </li>
        <li>
            <a href="#">Menu link</a>
        </li>
        <li>
            <a href="#">Menu link</a>
        </li>
    </ul>
    <ul class="col-md-4 parent">
        <a href="#">Menu link</a>
        <li>
            <a href="#">Menu link</a>
        </li>
        <li>
            <a href="#">Menu link</a>
        </li>
        <li>
            <a href="#">Menu link</a>
        </li>
    </ul>
    <ul class="col-md-4 parent">
        <a href="#">Menu link</a>
        <li>
            <a href="#">Menu link</a>
        </li>
        <li>
            <a href="#">Menu link</a>
        </li>
        <li>
            <a href="#">Menu link</a>
        </li>
    </ul>
    <ul class="col-md-4 parent">
        <a href="#">Menu link</a>
        <li>
            <a href="#">Menu link</a>
        </li>
        <li>
            <a href="#">Menu link</a>
        </li>
        <li>
            <a href="#">Menu link</a>
        </li>
    </ul>
    <ul class="col-md-4 parent">
        <a href="#">Menu link</a>
        <li>
            <a href="#">Menu link</a>
        </li>
        <li>
            <a href="#">Menu link</a>
        </li>
        <li>
            <a href="#">Menu link</a>
        </li>
    </ul>
    <ul class="col-md-4 parent">
        <a href="#">Menu link</a>
        <li>
            <a href="#">Menu link</a>
        </li>
        <li>
            <a href="#">Menu link</a>
        </li>
        <li>
            <a href="#">Menu link</a>
        </li>
    </ul>
</div>

.categ-list {    
    display: inline-block;
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.categ-list > ul {
    display: block;
    position: relative;
    float: left;
    text-align: center;
}
.categ-list > ul > a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
.categ-list > ul > li > a {
    display: block;
    text-decoration: none;
    color: #FFF;
    border-top: 1px solid #FFF;
    padding: 3px 15px;
    background: #344F57 none repeat scroll 0% 0%;
    margin-left: 1px;
    white-space: nowrap;
}
.categ-list > ul > li > a:hover {
    background-color: rgb(93, 93, 93);
}
.kat-active {
    background: #3b3b3b!important;
}
.categ-list > ul > a:hover {
    background: #3b3b3b;
}
.categ-list > ul > a:hover {
    background: #3b3b3b;
}
.categ-list > ul:hover ul a:hover {
    background: #1e7c9a;
}
.displayNone {
    display: none;
}