Подменю WordPress с градиентным фоном изображения над родительским LI и дочерним LI (подменю UL)

Question

У меня следующая ситуация / меню: http://inturnets.com/test/

Это структура меню, сгенерированная WordPress.

Пожалуйста, наведите курсор мыши на «Меню № 1». Когда мышь наведена, мне нужно Меню № 1, Меню № 1 - 1 и Меню № 1 - 2, чтобы они выглядели как http://inturnets.com/test/images/whatineed.jpg

Это фоновое изображение с эффектом градиента. Он должен начинаться с верхней части меню при наведении курсора, с верхней части меню № 1 и заканчиваться на индикаторах подменю UL. Когда изображение bg закончится (без повтора), цвет продолжится с последнего пикселя его нижней части. В нашем примере для лучшего визуального восприятия возьмем # ff0000:)

Кто-нибудь знает, как это решить?

Пока я попробовал следующий код CSS:

#menu-top-navigation ul:hover { background: url(images/bg-menutest.jpg) repeat-x center top; }

Но, как вы можете видеть, при этом только LI покрываются при наведении. Я имею в виду подменю UL. Я думаю, что здесь нам нужно правило наведения для скрытой LI, несколько закругленных углов с радиусом и другое правило наведения для подменю UL с радиусом угла и для непрерывного просмотра сверху вниз, как это выглядит на связанном изображении.

Answer 1

попробуйте указать цвет фона с помощью селектора следующим образом:

#menu-top-navigation > li:hover 

Таким образом, вы сможете указать один градиент для всего содержимого LI (в вашем случае UL и LI). Настоятельно рекомендуем использовать CSS3-градиенты.

Если это не поможет, вам может потребоваться указать градиент для

#menu-top-navigation > li:hover {gradient color of XXX to YYY}

и один для

#menu-top-navigation > li:hover > ul {gradient color of YYY to ZZZ}

Примечание: спецификация градиента является лишь примером, а не фактическим синтаксисом. Просто хотел, чтобы было легче понять.

Дайте мне знать, если у вас есть какие-либо вопросы.