CSS：移动菜单子菜单问题

Question

我创建了一个移动菜单。
现在我需要在该菜单中创建一个子菜单。
单击链接打开子菜单时出现两个问题。

1. 子菜单在第一级菜单后面打开，应将第一级向下推。

1234563移动设备 我能够单击菜单项两次，以便打开子菜单。

这是 HTML 输出！

<div class="menu-head-menu-container open">
    <ul id="menu-head-menu" class="menu">
        <li id="menu-item-30" class="menu-item menu-item-has-children">
            <ul class="sub-menu">
                <li id="menu-item-47" class="menu-item menu-item-47">
                <li id="menu-item-50" class="menu-item menu-item-50">
            </ul>
        </li>
        <li id="menu-item-29" class="menu-item menu-item-29">
    </ul>
</div>

这是子菜单的 CSS。

menu-head-menu-container > ul > li > ul {
    display:block;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    margin: 10px 0 0 -10px;
    background-color: #FFFFFF;
}

这是来自第一级菜单项的 css：

.menu-head-menu-container > ul > li {
    display: block;
    height: 40px;
    background: #006185;
    width: 100%;
    margin: 0;
    padding: 6px 0 0 0;
    border-bottom: 1px solid #FFF;
}

我真的不明白为什么子页面不可见。

M.

Answer 1

如果我理解正确，你可以使用这样的东西：

<div class="menu-head-menu-container open">
    <ul id="menu-head-menu" class="menu">
        <li id="menu-item-30" class="menu-item menu-item-has-children">click
            <ul class="sub-menu">
                <li id="menu-item-47" class="menu-item menu-item-47">123</li>
                <li id="menu-item-50" class="menu-item menu-item-50">123</li>
            </ul>
        </li>
        <li id="menu-item-29" class="menu-item menu-item-29">123</li>
    </ul>
</div>

$("#menu-head-menu li").click(function(){
    $(this).find("ul").slideToggle();
});

#menu-head-menu ul{
  display: none;
}

jsfiddle