Как отображать декоративный поинтер рядом с линком навигации, когда раскрылось выпадающее меню?

Question

[dhat]

В главном меню сайта, начиная со второго пункта выпадает окошко и появляется поинтер под названием линка. При передвижении линка в область дропдаун меню этот поинтер остается на месте. Как это реализовать? Насколько я понял, в этом сайте задейстована какая-то схема с target. Я ее не совсем понимаю, и не совсем уверене что сегодня это лучшая практика. Как сделать правильно?

апд: отчасти разобрался, как сделать чтобы фиксировался цвет :hover пункта меню под которым поинтер?

www.ap.org
Мой код - codepen.io/dhatt/pen/jAjoJA

Answer 1

[Андрей Верх]

Вешайте "поинтер", на li:hover, а не ссылку

Comments

[dhat]

Спасибо, вы правы. Но теперь другой вопрос - с поинтером разобрался, а как аналогично сделать чтобы фиксировался цвет :hover пункта меню под которым поинтер?

Answer 2

[Anton Почти]

.dropdown>li.active {
и тут то что вам надо
}

Comments

[dhat]

Не понял. Это не работает, если я делаю правильно конечно. Hover работает, а active нет.

[Anton Почти]

dhat: ul>li:hover {
background-image: url(www.ap.org/Content/images/icons/tpNvPointr.gif);
background-repeat: no-repeat;
background-position: center bottom;
}
ul>li>ul>li:hover {
background-image: url();
background-repeat: no-repeat;
background-position: center bottom;
}

[Anton Почти]

dhat: вставьте код и все работает

[dhat]

Я так и делал:

.test:hover {
background-image: url(www.ap.org/Content/images/icons/tpNvPointr.gif);
background-repeat: no-repeat;
background-position: center bottom;
}

Я присвоил класс второму li. Не работает :(

[dhat]

Вернее, ховер работает! Актив не работает!

[dhat]

Вы же написали active, а потом пишите код с hover

[Anton Почти]

dhat: посмотрите повнимательнее мой код выше , не нужно добавлять никакие классы , удалите класс ".test", и с CSS и c HTML , и вставьте этот код в CSS файл ->
ul>li:hover {
background-image: url(www.ap.org/Content/images/icons/tpNvPointr.gif);
background-repeat: no-repeat;
background-position: center bottom;
}
ul>li>ul>li:hover {
background-image: url();
background-repeat: no-repeat;
background-position: center bottom;
}

[dhat]

Так вы оговорились вначале, я непойму? ПРИ ЧЕМ ТУТ ACTIVE? И я не могу применить к li, потому что там куча других li где мне не нужен этот эффект. Спасибо за помощь, конечно, но..

[Anton Почти]

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

[dhat]

Anton Почти: не подскажите (или как в гугле спросить не подскажите) как корректно использовать при выборе селекторов этот символ ">"? Редко его встречаю, а в видеокурсах это не объясняли. Даже загуглить побыстрому не получается.

[Anton Почти]

dhat: codeharmony.ru/materials/42 почитайте тут, узнаете много нового , на здоровье

[dhat]

Anton Почти: благодарю.

Answer 3

[Ivan Bogachev]

апд: отчасти разобрался, как сделать чтобы фиксировался цвет :hover пункта меню

В вашем случае это должно быть где-то там......

.header-nav-ul > li:hover > a {
    color: #d19600;
}

И почитайте на досуге вот это или вот это. Селекторы вида ".header-nav-ul-drop-div li" заставляют некоторых людей плакать кровавыми слезами.

Comments

[dhat]

Спасибо, все четко работает! А насчет методологии и названий - так это я как раз БЭМа и начитался)) Но я не совсем понимаю где в данном случае модификатор

[dhat]

И не подскажите где почитать (или хотя бы что загуглить) про эти символы при определении селектора - ">"? Очень редко их встречаю. Их стоит использовать?

[Ivan Bogachev]

dhat: Есть занятная статья про 30 селекторов - в ней как раз про это написано. Про стоит или не стоит использовать не отвечу - это зависит как раз от принятого в компании (или просто любимого, если вы сами по себе) способа именования. Я часто использую именно rscss и активно использую ">", но знаю много людей, которые даже не притрагиваются к таким вещам

[dhat]

Ivan Bogachev: rscss я еще не встречал. Это аналог БЭМ? Смотрю звездочек много, попробую, спасибо. И за ссылку тоже.