Jump to content
  • 0

Отображение <li> в зависимости от наличия в нем вложенного <ul>


Squidward
 Share

Question

Нужно, чтобы у тех li, которые содержат вложенные ul, при условии :hover были свои стили CSS, отличные от тех li, которые не содержат вложенных ul. Можно ли это сделать средствами CSS? Если нет, подскажите, как это делается Яваскриптом. Просто для этих li при наведении фон нужен другой.

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

Нужно, чтобы у тех li, которые содержат вложенные ul, при условии :hover были свои стили CSS, отличные от тех li, которые не содержат вложенных ul. Можно ли это сделать средствами CSS? Если нет, подскажите, как это делается Яваскриптом. Просто для этих li при наведении фон нужен другой.

А есть возможность повесить класс на такой li? Обычно CMS вешают классы на элементы меню, которые содержат подменю.

Link to comment
Share on other sites

  • 0

Напишите для меню стили типа:


li {background-color:#c9c;color:#a00;}
li li {background-color:#ccc;color:#000;}
li li:hover {background-color:#000;color:#fff;}

И как это должно помочь?

А есть возможность повесить класс на такой li?

Нет, иначе бы я не спрашивал.

Link to comment
Share on other sites

  • 0

Напишите для меню стили типа:


li {background-color:#c9c;color:#a00;}
li li {background-color:#ccc;color:#000;}
li li:hover {background-color:#000;color:#fff;}

И как это должно помочь?

А как не должно? Ты так описал задачу.

Приведи скрины с примерами того, как нужно и как не нужно. А так же мини-тестовый пример с косяком.

Link to comment
Share on other sites

  • 0

Макс, тут задача такая, что если вдруг у пункта меню будет выпадалка, то он как-то должен на нее реагировать. И вся суть в том, что заранее неизвестно, где будет выпадающий список. Я так понял задачу.

Link to comment
Share on other sites

  • 0

Имеем пункты меню. У каких-то пунктов есть выпадающие меню второго уровня, у каких-то нет. Заранее прописать классы для тех пунктов, у которых есть выпадалка, нельзя - это CMS. Задача - для тех li, у которых есть выпадающие ul, получить другое отображение, а именно - фон при :hover. Меню горизонтальное, выпадалки выпадают вниз. Извиняюсь, если сначала написал непонятно - мне показалось, что все довольно четко.

Link to comment
Share on other sites

  • 0

Имеем пункты меню. У каких-то пунктов есть выпадающие меню второго уровня, у каких-то нет. Заранее прописать классы для тех пунктов, у которых есть выпадалка, нельзя - это CMS. Задача - для тех li, у которых есть выпадающие ul, получить другое отображение, а именно - фон при :hover. Меню горизонтальное, выпадалки выпадают вниз. Извиняюсь, если сначала написал непонятно - мне показалось, что все довольно четко.

В принципе, тут поможет jquery. А какая CMS если не секрет?

Link to comment
Share on other sites

  • 0

Можно так сделать.

Сразу не проверил, а теперь посмотрел. Нет, это не подходит. Это просто перекрывание li вложенным ul. Видимо, нельзя выстроить зависимость от потомка к родителю голым CSS.

Link to comment
Share on other sites

  • 0

Да если CMS не делает этого, то джсом проверяйте наличие дропа и ставьте класс. Если вы только верстаете, и джс не делаете, то ставьте сами классы и верстайте дальше. Потом другой человек сделает джс.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy