Как правильно применить стиль к li class X ul class Y?

[nikki4]

Нужно расширить подменю 2, но чтобы 1 осталось как есть

но я путаюсь в уровнях вложенности , пробовал так, но не работает

 .item-3 deeper parent .mega-menu { }

т.е. нужно изменить стиль к "мега-меню" , которое расположено в li с классом item-3 deeper parent

при этом чтобы мега-меню  li  другого пункта не задело

 

Вот пример

<li class="item-1 deeper parent"><a class="separator" href="#">Меню 1</a>  <ul class="mega-menu" style="width: 307px;"><li class="item-2 deeper parent" style="width: 500px;"><a class="separator" href="#">Пунт меню 1</a>      <li class="item-3 deeper parent"><a class="separator" href="#">Меню 2</a>  <ul class="mega-menu" style="width: 307px;"><li class="item-4 deeper parent" style="width: 500px;"><a class="separator" href="#">Пунт меню 2</a> 

 .mega-menu {  background:yellow;  height:50px;  width:1000px !important;}

http://codepen.io/anon/pen/BNwRZL

Edited June 19, 2015 by nikki4

[satantx]

Почему у вас тэги не закрыты?

И надо классы через точку писать в css .item-3 .deeper .parent .mega-menu { }

[SelenIT]

Почему у вас тэги не закрыты?

 

Очевидно, это только фрагмент кода, ниже ветвей много, закрываются они где-то далеко впереди. Но вообще HTML5 позволяет опускать закрывающий </li>, он закрывается автоматически перед ближайшим <li> того же уровня или закрывающим родительским </ul>. Хотя для вложенных списков этим злоупотреблять нельзя — слишком велик риск запутаться

[nikki4]

Все правильно это только фрагмент из большого меню.

Спасибо вопрос решен.

Я просто не знал, что это 3 класса -  class="item-3 deeper parent"

Думал что один, а он не работал.. теперь понятно почему.

Оказалось достаточно написать просто .item-3 .mega-menu

Edited June 19, 2015 by nikki4