Как найти ошибку в CSS?

Question

[maiskiykot]

Попросили глянуть меню на этом сайте. 167 кб кода и не могу никак определить ошибку. Если вставляешь css от другой темы - работает, но верстка летит. Проблема в том, что третий уровень меню не скрывается. Хотелось бы для себя понять: почему? Спасибо за любые подсказки!

Comments

[lUser L]

Вы задали .menu-level-1 всем кому только можно.
Первому списку задайте .menu-level-1, второму списку .menu-level-2 и тд
А списку на 3 уровне задайте другой класс, только ему, например .level-3-sub-list
Тогда:

.menu-level-2:hover .level-3-sub-list { 
  display: block;
}

У себя в девтулзе проверил, работает

[maiskiykot]

Эмиль 🔥, Эта хрень динамически формируется. Я вряд ли смогу найти концы. Если подставляю css от другой темы - меню работает нормально

[lUser L]

maiskiykot,
Вариант 1: найти где формируется и там внести изменение
Вариант 2: понять, что многоуровневые меню давно пора делать на джс, и все переписать на js

[maiskiykot]

Другой же файл css рвботает с этим кодом.

[lUser L]

maiskiykot, вот полный цсс, попробуй разобраться как я это сделал

открой девтулз, дальше цсс файл standalone.css выдели все и удали, потом вставь тот цсс который я дал, и посмотри

https://pastebin.com/raw/9rsJGAT2 - тут цсс

[maiskiykot]

Может мне родной css куда-то выложить? А-то он раз в 5 меньше вашего. тыц

[lUser L]

maiskiykot, Это не полный файл.

- убираем 735 строчка
.no-touch .ty-menu__item:hover .ty-menu__submenu-items,.is-hover-menu .ty-menu__submenu-items {
    display: block;
}

убираем display: none; делаем видимым по дефолту - 764 строчка
.ty-menu__submenu-items {
  display: block;
  /* display: none; */
}

найти в каком файле этот кусок и обязательно изменить 
.menu-level-1:hover .ty-menu__submenu {
    display: block !important;
}

на 

.menu-level-1:hover > .ty-menu__submenu {
    display: block !important;
}

[maiskiykot]

Сейчас буду пробовать. Отпишусь

[maiskiykot]

Сработало! Спасибо, хотя я так и не понял: как это найти самостоятельно.