присвоение классов элементам списка

[Mixail.09]

   Здравствуйте.

   Помогите пожалуйста разобраться новичку с данным вопросом. Подскажите где искать информацию на данную тему. 

   Суть проблемы в следующем:

начал делать двухуровневое выпадающее меню и оказалось все не так просто). Допустим есть многоуровневый список вложенный в <div class="memu">, смотрел видео и читал про создание таких меню и не могу понять как можно описать стиль отдельно для вложенных списков. В общем для меня конструкции вида:" .menu ul li {}    .menu li ul {}    .menu li ul ul {}" реально танцы с бубном не говоря уже о menu ul li:hover>ul и т.д.

   Не могу понять принципа как описывать свойство вложенного списка да еще и плюс ко всему там по разному описываются и li  b ul. 

   

[abrahadabra]

Вы правильно понимаете.

li.int — просто элемент списка с классом int, li.int:hover — это когда наведена мышь на элемент списка с классом int.

li.int ul.has-menu — список с классом has-menu внутри элемента списка с классом int. li.int:hover ul.has-menu применится к списку с классом has-menu внутри элемента списка с классом int, когда на элемента списка с классом int наведена мышь.

[satantx]

Это не танцы с бубном, так и делают

Есть блок меню (.menu), в нём меню (.menu ul), дальше список (.menu ul li), в одном из списка - вложенное меню (.menu ul li ul) и так далее. Вот и манипулируете ими.

Наводим на список в меню (.menu > ul > li:hover) и появляется подменю данного списка (menu > ul > li:hover > ul)

[Mixail.09]

Спасибо, с классами вроде разобрался (хотя наверняка запись можно делать короче чем я).

Но вот hover - что нужно ставить перед ним, а что за ним для получения двухуровнего выпадающего списка - загадка для меня

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

[Нарек]

Не надо делать огромные каскады типа .menu ul li ul li a, дайте подменю какой то класс и стилизуйте нормально.

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

[Mixail.09]

Не надо делать огромные каскады типа .menu ul li ul li a, дайте подменю какой то класс и стилизуйте нормально.

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

Спасибо так и буду делать. 

 

И все же если словами описать вот эту запись .class ui li:hover li {color: red; }     при наведении на список с классом .class цвет шрифта должен измениться на красный, понятно что если бы после ховера ни чего бы не стояло, то поменялся бы цвет этого списка, а если поставить после ховера li тогда цвет чего меняться будет?

[abrahadabra]

меняться будет цвет всех элементов списка, вложенного в тот элемент внешнего списка, на который наведена мышь

[Mixail.09]

меняться будет цвет всех элементов списка, вложенного в тот элемент внешнего списка, на который наведена мышь

Спасибо. Понемногу проясняется)

[abrahadabra]

ну и славно!

А чего не хватает для полного прояснения? Давайте разберём до конца. На самом деле простая тема.

[Mixail.09]

ну и славно!

А чего не хватает для полного прояснения? Давайте разберём до конца. На самом деле простая тема.

Я понял так - все что прописано до ховера - это элемент на который мы наводим курсор,

то что прописано после ховера это элемент который будет менять свойство.

И значит вот такая запись по идее должна быть корректна? (li.int:hover ul.has-menu {display: block;}) и наведя курсор на пункт li с классом .int должно появится подменю которому присвоен класс .has-menu  

Правильно понимаю?

[Mixail.09]

Разобрался) спасибо