造型第三級菜單不起作用

Question

在我嘗試創建超級菜單時，IM卡住了造型第三級子菜單。第一個子菜單（li ul）不顯示（顯示：無）。然後我有jquery腳本，顯示子菜單懸停（li ul - 第一級）。如果窗口小於768px，則點擊功能被激活（用於觸摸屏）。

我的問題是，當我想風格的第三級子菜單（子菜單的子菜單 - 李 - ul - 李 - ul）沒有風格應用 - 我希望它始終顯示，但隱藏，顯示：無應用於該UL，但我將其設置爲display：block。所以只有當我懸停它的LI元素時才顯示出來（li ul li hover）。

因此，基本上我試圖做的是第一個子菜單（li-ul）在懸停（或點擊手機）時激活，但第二個子菜單（子菜單的子菜單）總是可見的。當我嘗試設計它時，我可以像這樣訪問它：li ul li ul，並且不起作用。我應該如何訪問它？另外當我試圖懸停第三級子菜單，菜單關閉，我沒有在jquery中指定它。

HTML

<div class="menu-container"> 
     <ul class="menu"> 
      <li><a href="#">Home</a> 
       <ul> 
        <li><a href="#">Ovo je nesto</a> 
         <ul> 
          <li><a href="#">aaa</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Ovo je nesto</a></li> 
        <li><a href="#">Ovo je nesto</a></li> 
        <li><a href="#">Ovo je nesto</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Who are we?</a> 
       <ul> 
        <li>This is mega menu</li> 
       </ul> 
      </li> 
      <li><a href="#">Services</a></li> 
       <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 

CSS

.menu-container { 
    width: 80%; 
    margin: 0 auto; 
    background: #333; 
} 
.menu { 
    margin: 0 auto; 
    list-style: none; 
    padding: 0; 
    position: relative; 
} 
.menu:before, 
.menu:after { 
    content: ""; 
    display: table; 
} 
.menu:after { 
    clear: both; 
} 
.menu li { 
    float: left; 
    background: #e9e9e9; 
    padding: 0; 
    margin: 0; 
} 
.menu li a { 
    text-decoration: none; 
    padding: 1.5em 3em; 
    display: inline-block; 
    outline: 0 none; 
} 
.menu li ul { 
    display: none; 
    width: 100%; 
    background: #333; 
    padding: 20px; 
    position: absolute; 
    z-index: 99; 
    left: 0; 
    color: #fff; 
    margin: 0; 
} 
.menu li ul li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 25%; 
    background: none; 
    float: left; 
} 
.menu li ul li a { 
    color: #fff; 
    padding: .2em 0; 
} 
.menu li ul li ul { 
    display: block; 
} 
.menu li ul li ul li { 
    display: block; 
} 
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
960px 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
TABLETS 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
MOBILE 100% 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
@media only screen and (max-width: 767px) { 
    .menu > li { 
    float: none; 
    width: 100%; 
    } 
    .menu > li > ul { 
    position: relative; 
    } 
    .menu > li > ul li { 
    float: none; 
    width: 100%; 
    } 
} 

Jquery的

$(document).ready(function() { 
    $(".menu li").hover(function() { 
     if ($(window).width() > 767) { 
      $('.menu ul li ul').not($(this).children("ul").fadeToggle(200)).hide(); 
     } 
    }); 
    $(".menu li").click(function() { 
     if ($(window).width() <= 767) { 
      $('.menu ul li ul').not($(this).children("ul").fadeToggle(200)).hide(); 
     } 
    }); 
}); 

演示：http://codepen.io/riogrande/pen/ZbaeKa

Answer 1

CSS選擇器.menu li ul li ul li將選擇第三級子菜單或更低級別的所有列表項目。如提到的蘇打水，您可以使用課程或直接派生選擇器>來微調特定子菜單級別的樣式。

---

下面的代碼片段將修復子菜單徘徊效果更直觀 - 具有隱藏，直到其父懸停在所有菜單。

JavaScript的 - 與此更換整個淡入/隱藏聲明：

$(this).children("ul").fadeToggle(200); 

CSS：

.menu li ul li ul { 
    display: none; 
} 

---

如果你想在第二個子菜單可見，當第一子菜單可見，jQuery選擇器應該是$(".menu > li")而不是選擇第一個子菜單，並且CSS可以保持原樣。

Answer 2

這些選擇可靶向相同li元素，所述第一上e是非常廣泛的，並取消該規則以下物質：

.menu li ul { 
    display: none; 
    width: 100%; 
    background: #333; 
    padding: 20px; 
    position: absolute; 
    z-index: 99; 
    left: 0; 
    color: #fff; 
    margin: 0; 
} 

.menu li ul li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 25%; 
    background: none; 
    float: left; 
} 

.menu li ul li ul { 
    display: block; 
} 

.menu li ul li ul li { 
    display: block; 
} 

您可以使用>選擇只定位直接孩子，但我強烈建議您使用類來代替，以幫助各級之間的分隔方式：

<div class="menu-container"> 
    <ul class="menu-level1"> 
     <li><a href="#">Home</a> 
      <ul class="menu-level2"> 
       <li><a href="#">Ovo je nesto</a> 
        <ul class="menu-level3"> 
         <li><a href="#">aaa</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Ovo je nesto</a></li> 
       <li><a href="#">Ovo je nesto</a></li> 
       <li><a href="#">Ovo je nesto</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Who are we?</a> 
      <ul class="menu-level2"> 
       <li>This is mega menu</li> 
      </ul> 
     </li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div>