Drop down menu 将水平子菜单更改为垂直下拉菜单

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

我真的不懂孩子们的课

---

如需将此设置为下拉菜单，我们将不胜感激。：）

正如我在评论中提到的，您的CSS是有效的，您只需要一个UL，它是一个主LIs的子级，标记有

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>

我想你所拥有的大部分都在那里。我用你的CSS做了一个标记，并假设了一些标记。谢谢，唐！！这就解决了问题。有时只需要另一双眼睛。