CSS：移動菜單子菜單問題

Question

我創建了一個移動菜單。
現在我需要在該菜單中創建一個子菜單。
單擊鏈接打開子菜單時發生兩個問題。

1. 該子菜單在1級菜單後面打開，並應推低第1級。

2. 如果我「點擊」（你如何在手機上調用它？）打開子菜單的鏈接，它直接進入頁面，顯而易見，但我創建了鼠標懸停在桌面和手機上的菜單設備我能夠點擊菜單項兩次，所以我可以打開子菜單。

這裏是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