Нужно добавить графику в активный пункт меню

Question

Я хотел бы добавить галочку к активному пункту меню, но не могу понять, как с моим текущим кодом.Вот график того, что я пытаюсь выполнить (обратите внимание, что отметка внизу (по центру):

Любая помощь будет принята с благодарностью.

Вы можете увидеть текущий сайт по адресу: http://www.redone.org/_dev/ski/menu2.html

Answer 1

Фоновое изображение, представленное в других ответах, является наиболее распространенным способом решения этой проблемы. Хорошая альтернатива также доступна, так как этот конкретный рисунок, треугольник, может быть легко создан в HTML + CSS; изображения, холсты, SVG / VML или плагины не требуются.

<div style="
    position:absolute; 
    width:0; 
    right:0; 
    border: 10px solid #fff;
    border-top-color: #000;
    "></div> 

Я создал базовый пример меню, используя эту технику . Полигоны в CSS были исследованы, по крайней мере, еще в 2001 году Tantek Çelik .

Answer 2

Вашему «текущему» пункту меню должен быть присвоен дополнительный класс (например, «текущий»).Затем вы добавляете правило css для «текущего» класса, который отображает дополнительную графику внизу.

Answer 3

Спасибо, что указали мне направление.Вот что у меня получилось:

#headerline {
    overflow: visible;
    border-bottom: 1px solid #2c5e93;
    height: 40px;
}

#menu-main-menu li.current_page_item a{
    color: #014783;
    background-color: #89cefa;
}

#menu-main-menu li.current_page_item {
    height: 50px;
    background-image:url(ski_tick.png);
    background-position:center;
    background-repeat:no-repeat;
}

Answer 4

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

current_page_item

изменить фоновое изображение для этого ..// сделать одно изображение с таким цветом, как вызов

// это похоже на код psuedo, это не работает в ie7, поэтому вы можете использовать jquery

li a:hover 

    {
    background-image: url(images/callout.jpg);
    }