Как сделать при наведении в меню ...?

Question

[Mark]

Всем привет, создал меню
1 изображение

2 изображение

1 изображение, так выглядит при наведении на "Кровельные работы".
2 изображение, при наведении на ссылки выпадающие (список).

Вопрос: как сделать, чтобы при наведении на "Кровельные работы" был этот эффект градиента фиксированным и при наведении на список ссылок в голубом квадрате, Когда убираешь курсор мыши, убирается градиент.
И при клике на раздел и любую ссылку в списке, чтобы был этот градиент постоянно открытым без разницы наводишь мышку или нет.
Возможно описал тупо, только проснулся)) Напишите пожалуйста куда копать или решение, возможно hover использовать или что?

Answer 1

[Андрей Токмаков]

codepen.io/anon/pen/gmdZoy

И при клике на раздел и любую ссылку в списке, чтобы был этот градиент постоянно открытым без разницы наводишь мышку или нет.

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

Answer 2

[Никита]

Разметку хотя бы выложил бы.

<ul>
    <li><a href="#">Пункт меню 1</a></li>
    <li><a href="#">Пункт меню 2</a>
        <ul>
            <li><a href="#">Подпункт меню 1</a></li>
            <li><a href="#">Подпункт меню 2</a></li>
        </ul>
    </li>
</ul>

Должно выглядеть примерно так, тогда применяя hover на li первого уровня, у вас он не будет сбрасываться при наведении на выпадающие меню, т к оно внутри него