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

[BaNru]

Описания всё сложнее и сложнее.
Велика вероятность, что поставленная задаче немного не так "срежиссирована".
Текущий вариант с вёрсткой только на JS.

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

 

[clean-nt]

На самом деле это заключительный сложный вопрос. Дальше планируются только мелкие правки.

 

[clean-nt]

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

http://jsfiddle.net/remv8uay/

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

 

[clean-nt]

Добрый день!

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

 

[BaNru]

По #23 сообщению

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

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

 

[clean-nt]

По #23 сообщению

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

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

Да

 

[clean-nt]

Добрый день!

После добавления в код:

li:hover a {
color: #40382D;
}

http://jsfiddle.net/remv8uay/3/

 

[BaNru]

Почитай уже материалы на тему ""Каскадирование и наследование 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]

По поводу #20 сообщения
http://jsfiddle.net/fwns5e14/7/
На скорую руку как-то так на jQuery
Но это решение не очень хорошее. Изначально задача как-то не айс поставлена.

 

[clean-nt]

Изначально задача как-то не айс поставлена.

Почему это?

Спасибо за помощь. Занимаюсь этим делом время от времени.

 

[BaNru]

Потому что верстка "кривая".
Если видеть макет, то можно сделать нормальную верстку и написать нормальный гибкий скрипт.
Сейчас это как чесать левой пяткой правое ухо.

 

[Patrick_Kane]

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


<li></li><!-- тут не должно быть пробела --><li></li><li></li>

Была такая же проблема, нашел в вашем ответе решение, спасибо!)