стиль третьего уровня меню не работает

Question

В моей попытке создать мега-меню, я застрял в укладке третьего уровня подменю. Первое подменю (li ul) не отображается (отображение: нет). Затем у меня есть сценарий jquery, который показывает это подменю при наведении (li ul - первый уровень). Если окно меньше 768px, тогда активируется функция щелчка (для сенсорных экранов).

Моя проблема в том, когда я хочу создать подменю третьего уровня (подменю подменю - li - ul - li - ul) не применяется стиль - я хочу, чтобы он отображался всегда, но скрыт, отображение: none применяется к этому 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

Селектор .menu li ul li ul li CSS выберет все элементы списка в подменю 3-го уровня или ниже. Как упоминалось в sodawillow, вы можете использовать классы или прямой селектор потомков > для тонкой настройки стилей для определенных уровней подменю.

---

Следующие фрагменты зафиксирует подменю парящий эффект более интуитивным - имея все меню скрыты, пока его родители не завис над.

JavaScript - заменить весь выцветанию скрыть заявление/с этим:

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

CSS:

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

---

Если вы хотите второе подменю, чтобы быть видимыми при первом подменю виден , селектор jQuery должен быть $(".menu > li") вместо этого, чтобы выбрать только первое подменю, а CSS можно оставить как есть.

Answer 2

Эти селекторы могут быть ориентированы на одни и те же элементы Li, первый из которых е очень широк и отменяет правила следующие:

.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>