0

Здравствуйте. Вопрос таков: как под выбранным пунктом меню показать треугольник. Вот код треугольника:

 .arrow {
    position: absolute;
    top: 70px;
    left: 260px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid white;
    }

1 ответ 1

3

В каком смысле "выбранный"?

Обычно при формировании страницы, текущий пункт меню помечается каким-нибудь классом.

Чтобы показать при клике, опять же, с помощью js добавляете класс.

При наведении, используется псевдокласс :hover

Для всех трех случаев (учитывая, что .arrow находится внутри <а>):

li a.selected .arrow,
li a:hover .arrow {
    display: block; /* один из вариантов */
}

Если нужно поместить .arrow вне ссылки, то используя css3 это можно сделать так (я не проверял, но должно работать):

/* применяется ко всем элементам .arrow,
которые находятся на одном уровне с a и a:hover */
a.selected ~ .arrow,
a:hover ~ .arrow {
    display:block;
}
1
  • 1
    Спасибо что ответили. Мне нужен был как раз 2 вариант из вашего ответа.
    – Iwww
    14 июн 2012 в 9:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.