Выпадающие горизонтальные подменю

Статус
Закрыто для дальнейших ответов.

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Описания всё сложнее и сложнее.
Велика вероятность, что поставленная задаче немного не так "срежиссирована".
Текущий вариант с вёрсткой только на JS.

Попробуй ещё раз пере озвучить задачу.
 

clean-nt

Member
Регистрация
07.11.2018
Сообщения
19
На самом деле это заключительный сложный вопрос. Дальше планируются только мелкие правки. :)
 

clean-nt

Member
Регистрация
07.11.2018
Сообщения
19
Здравствуйте.

http://jsfiddle.net/remv8uay/

Что нужно исправить в коде, чтобы при наведении на ссылки цвет шрифта менялся на темный?
В li:hover цвет шрифта уже изменен: color: #40382D;
 

clean-nt

Member
Регистрация
07.11.2018
Сообщения
19
Добрый день!

Вопрос остается в силе.
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
По #23 сообщению

li:hover a {
color: #40382D;
}
Почитай внимательно вот эту статью, там всё по этому поводу подробно расписано
http://htmlbook.ru/samcss/kaskadirovanie
Либо в гугле "Каскадирование и наследование CSS"

По #20 сообщению ещё надо решение на JS?
 

clean-nt

Member
Регистрация
07.11.2018
Сообщения
19
BaNru сказал(а):
По #23 сообщению

li:hover a {
color: #40382D;
}
Почитай внимательно вот эту статью, там всё по этому поводу подробно расписано
http://htmlbook.ru/samcss/kaskadirovanie
Либо в гугле "Каскадирование и наследование CSS"

По #20 сообщению ещё надо решение на JS?
Да
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Почитай уже материалы на тему ""Каскадирование и наследование CSS"
У каждого элемента есть свой приоритет.
Каждую страницу можно представить в виде слоённого пирога

И стили также назначаются в виде слоённого пирога, но с возможностью назначить приоритет выше слоя выше.
По ссылке выше наглядно написано
* {} /* a=0 b=0 c=0 -> специфичность = 0 */
li {} /* a=0 b=0 c=1 -> специфичность = 1 */
li:first-line {} /* a=0 b=0 c=2 -> специфичность = 2 */
ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */
ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */
ul li.red {} /* a=0 b=1 c=2 -> специфичность = 12 */
li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */
#t34 {} /* a=1 b=0 c=0 -> специфичность = 100 */
#content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */
Пройди курс, если не понимаешь
https://htmlacademy.ru/courses/66

И вот если будут вопросы - спрашивай уже.
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
По поводу #20 сообщения
http://jsfiddle.net/fwns5e14/7/
На скорую руку как-то так на jQuery
Но это решение не очень хорошее. Изначально задача как-то не айс поставлена.
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Потому что верстка "кривая".
Если видеть макет, то можно сделать нормальную верстку и написать нормальный гибкий скрипт.
Сейчас это как чесать левой пяткой правое ухо.
 

Patrick_Kane

New Member
Регистрация
19.02.2019
Сообщения
7
BaNru сказал(а):
Точно также, как и для второго уровня: для третьего уровня .pod-menu добавить position: absolute;
Чтобы было в строку - надо применять своего рода хак: делать через inline-block (оно там уже есть), но добавить white-space: nowrap;
Я так понимаю там была попытка сделать в одну строку с помощью отрицательных маргинов, но это не очень хороший вариант, потому что шрифты на разных ОС - немного разные и у меня, например, на Линуксе - они не уместились. Поэтому лучше применить white-space: nowrap;
А пробелы убрать физически - написать код без пробелов


<li></li><!-- тут не должно быть пробела --><li></li><li></li>
Была такая же проблема, нашел в вашем ответе решение, спасибо!)
 
Статус
Закрыто для дальнейших ответов.
Верх Низ