Изображение ниже активного элемента меню

[PalychXX]

Нужно чтобы ниже активного элемента меню появлялось изображение (полукруг). Удалось сделать его только фоном активного элемента (т.е. под текстом):

ul.hmenu a.active .t
{
  background-image: url('images/id.png');
  background-repeat: no-repeat;
  background-position: top center; /* для моей задачи правильнее конечно bottom center */
  padding-top: 0px;
}

При попытке смещения вниз изображение тупо обрезается.

Понимаю, что нужно либо как-то увеличивать высоту пункта меню чтобы при смещении фоновое изображение не обрезалось (но при этом запретить перенос слов), либо вообще отображать изображение в качестве отдельного блока, расположение которого будет привязано к активному пункту меню.

Посоветуйте плз, как лучше поступить.

Edited May 7, 2012 by PalychXX

[Viper]

В вашем случае лучшим вариантом будет увеличить/добавить padding-top для A и ему же прописать background(лучше в сокращенной форме), а также:

display: inline-block;
*display: inline;
zoom: 1;

LI как сепараторы там не нужны. Эти сепараторы можно поместить как background в LI с пунктом меню. ИМХО

Edited May 4, 2012 by Viper

[PalychXX]

Спасибо, Ваши советы помогли продвинуть результат.

Только вот на главной картинка под меню ну никак не хочет отображаться...

Edited May 5, 2012 by PalychXX

[Viper]

Только вот на главной картинка под меню ну никак не хочет отображаться...

Потому-что этот фон привязан к классу .active, который при переходе на Главную отсутсвует у необходимого тега <a>

[PalychXX]

Потому-что этот фон привязан к классу .active, который при переходе на Главную отсутсвует у необходимого тега <a>

Все верно, я в Wordpress'е накосячил, при создании меню вместо ссылки на главную страницу вставил произвольную ссылку на "/" и двиг такую ссылку не ассоциировал с активной главной страницей. Поправил и все заработало.

Еще раз большое спасибо!!!