Jump to content
  • Sign Up
Sign in to follow this  
Mixail.09

присвоение классов элементам списка

Recommended Posts

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

   Помогите пожалуйста разобраться новичку с данным вопросом. Подскажите где искать информацию на данную тему. 

   Суть проблемы в следующем:

начал делать двухуровневое выпадающее меню и оказалось все не так просто). Допустим есть многоуровневый список вложенный в <div class="memu">, смотрел видео и читал про создание таких меню и не могу понять как можно описать стиль отдельно для вложенных списков. В общем для меня конструкции вида:" .menu ul li {}    .menu li ul {}    .menu li ul ul {}" реально танцы с бубном не говоря уже о menu ul li:hover>ul и т.д.

   Не могу понять принципа как описывать свойство вложенного списка да еще и плюс ко всему там по разному описываются и li  b ul. 

   

Share this post


Link to post
Share on other sites

Это не танцы с бубном, так и делают

Есть блок меню (.menu), в нём меню (.menu ul), дальше список (.menu ul li), в одном из списка - вложенное меню (.menu ul li ul) и так далее. Вот и манипулируете ими.

Наводим на список в меню (.menu > ul > li:hover) и появляется подменю данного списка (menu > ul > li:hover > ul)

Share this post


Link to post
Share on other sites

Спасибо, с классами вроде разобрался (хотя наверняка запись можно делать короче чем я).

Но вот hover - что нужно ставить перед ним, а что за ним для получения двухуровнего выпадающего списка - загадка для меня

http://codepen.io/anon/pen/zrprve

Share this post


Link to post
Share on other sites

Не надо делать огромные каскады типа .menu ul li ul li a, дайте подменю какой то класс и стилизуйте нормально.

http://codepen.io/anon/pen/wMpGaE

Спасибо так и буду делать. 

 

И все же если словами описать вот эту запись .class ui li:hover li {color: red; }     при наведении на список с классом .class цвет шрифта должен измениться на красный, понятно что если бы после ховера ни чего бы не стояло, то поменялся бы цвет этого списка, а если поставить после ховера li тогда цвет чего меняться будет?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Спасибо. Понемногу проясняется)

Share this post


Link to post
Share on other sites

ну и славно! :)

А чего не хватает для полного прояснения? Давайте разберём до конца. На самом деле простая тема.

Share this post


Link to post
Share on other sites

ну и славно! :)

А чего не хватает для полного прояснения? Давайте разберём до конца. На самом деле простая тема.

Я понял так - все что прописано до ховера - это элемент на который мы наводим курсор,

то что прописано после ховера это элемент который будет менять свойство.

И значит вот такая запись по идее должна быть корректна? (li.int:hover ul.has-menu {display: block;}) и наведя курсор на пункт li с классом .int должно появится подменю которому присвоен класс .has-menu  

Правильно понимаю?

Share this post


Link to post
Share on other sites

Вы правильно понимаете.

li.int — просто элемент списка с классом int, li.int:hover — это когда наведена мышь на элемент списка с классом int.

li.int ul.has-menu — список с классом has-menu внутри элемента списка с классом int. li.int:hover ul.has-menu применится к списку с классом has-menu внутри элемента списка с классом int, когда на элемента списка с классом int наведена мышь.

Share this post


Link to post
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
Reply to this topic...

×   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.

Sign in to follow this  

  • Similar Content

    • By Bourdun
      Не знаю как это объяснить, смотрите на скриншоты. Как решить эту проблему?
       


    • By leShik
      Попросили добавить текста немного на сайт. Добавил блок со списком, отображение вот такое

      Какие стили отвечают за такое отображение?
      Его стили на данном этапе))
      div style="position: relative; clear: both;"
      "position: absolute; clear: both; z-index: 1000;" - отображает вот так

      почему "type" для ul не отрисовывает маркеры?
      Вроде на дримвивере написан, хотя хз))
  • Member Statistics

    46,841
    Total Members
    1,451
    Most Online
    SkyMasteer
    Newest Member
    SkyMasteer
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Я люблю баклажаны. Рулетики из баклажанов Прекрасный диетический обед или гарнир к основному блюду! Вкууууусно! Даже мужу, который овощи не любит вообще, понравилось:))))Я делала из расчёта на одного человека, поэтому, соответственно, если будете делать рулетики из баклажанов на двоих, то всего надо брать вдвое больше:))). Продукты  (на 1 порцию) Баклажан (маленький) - 1 шт. Помидор - 0,5 шт. Морковка(маленькая) - 1 шт. Луковица (маленькая) - 1 шт. Растительное масло Соль, перец, сухой молотый чеснок - по вкусу Как приготовить рулетики из баклажанов: Баклажаны нарезаем вдоль и присыпаем солью. Откладываем в сторону минут на 10. Припустим мелко порезанный лук на растительном масле до прозрачности. Добавляем натёртую на тёрке морковь и порезанную мелко помидорку. Солим, перчим, добавляем чеснок, наливаем немного воды, закрыть крышкой и тушим ещё минут 10. Ломтики баклажана сполоснуть, обжариваем с двух сторон до мягкости на сковороде с небольшим количеством растительного масла. Готовые ломтики промакнём бумажным полотенцем от лишнего жира. Кладём на серединку каждого ломтика нашу начинку и завернуть в рулетики. Скрепляем зубочисткой, чтобы не развалились. Вот и готовы рулетики из баклажан – фото перед вами! Ням-ням-ням:)))  
    • Ясно, спс. Теперь буду привыкать к такому поведению, хотя на мой взгляд такое поведение пригодится только тем кто случайно нажимает на эту кнопку и соглашается пометить форум прочитанным
    • Как оказалось это обновление CMS, в результате которого именно так ведёт себя эта фича. Вот что сказал саппорт:  
  • Popular Contributors

×
×
  • Create New...