0

我想将我的水平子菜单更改为下拉式菜单。这是我的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 类。

任何有助于使其成为下拉菜单的帮助表示赞赏。:)

4

1 回答 1

0

正如我在评论中提到的，您的 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>
于 2013-02-06T06:46:24.487 回答