Question

Hello stackoverflow社区。我的清单需要帮助。我需要做这样的事情：

正如您所看到的，按下按钮时，带有复选框的列表会下降。如何使图片中的全宽下拉？这么长时间我做了类似的东西，但无法弄明白，如何制作全宽，以便其他按钮向下移动。这是我在jsfiddle中的代码：https://jsfiddle.net/DTcHh/13790/

所以要确保我需要我的ul＆gt; a将与它的尺寸相同但是ul> li将是全宽并按下其他按钮。 HTML：

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

Css：

.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;
}

列表和下拉列表的问题

0 个答案: