Question

我想将水平子菜单更改为下拉式菜单。这是我的CSS：

#menubar ul{
    height:48px;
    clear:both;
}
#menubar li{
    float:left;
    display:inline;
    height:48px;
    margin-top:11px;
    border-right: 1px solid #E7E7E7;
}
#menubar a{
    line-height:48px;
    padding: 0 8px;
    text-decoration:none;
    font-size: 14px;
    font-weight:800;
    color:#4A4A4A;
}
#menubar a:hover{
    color:#000;
}
#menubar li:last-child{
    border-right: 0 none;
}
ul.children{
    display:none;
    position:absolute;
    margin-top:-10px;
}
#menubar li:hover > ul {
    width:200px;
    display:block;
    height:auto;
}
ul.children li{
    width:200px;
    position:static;
    float:none;
    display: block;
    margin:-10px;
    text-align:left;
    background-color:#fff;
    clear:both;
    box-shadow:0px 4px 9px #a6d19c;
    border:1px solid #a6d19c;
    font-size:14px;
    font-weight:700;
    border-left:none;
    border-right:none;
    border-top:none;
    margin-left:0;
}
#menubar ul.children a{
    float:none;
    background-color:#fff;
    white-space:nowrap;
    font-size:12px;
    font-weight:600;
}

我已经尝试消除块和内联显示，但无济于事。我习惯将CSS应用于以下元素：

#access ul li li {}

并且不太了解.children类。

任何有助于将其作为下拉菜单的帮助表示赞赏。：）

Answer 1

正如我的评论中所提到的，你的CSS工作，你只需要一个主要LI之一的孩子的UL，标有class="children"，例如。

<div id="menubar">
    <ul>
        <li><a href="">Parent menu</a>
            <ul class="children">
                <li><a href="">Child menu items</a></li>
                <li><a href="">Child menu items 2</a></li>
            </ul>
        </li>
    </ul>
</div>

将我的水平子菜单更改为垂直下拉菜单

1 个答案: