Горизонтальное меню CSS трабла

[skifus]

Вобщем, пришлось учится верстать, с горем пополам смог сделать li горизонт, картинки прочее сделал, проблема вот в чем:

1)Нужно чтобы при ховере свечение было от верха панели, а оно начинается от низа текста. Как сделать по другому не пойму, в hover span смещение не работает.

CMS Jоомла если поможет

2) не выделяет активную страницу - т.е. юзер просто потеряется, не видя где он

Коды вот:

HTML

<div id="topm">
 <li class="about">
 <a href="http://testt.ru/" title="О компании"><img src="/templates/sw/images/1.png" /></a>
 </li>
 <li class="facility active">
 <a href="#" title="Услуги"><img src="/templates/sw/images/2.png" /></a>
 </li>
 <li class="portfolio">
 <a href="#" title="Портфолио"><img src="/templates/sw/images/3.png" /></a>
 </li>
 <li class="vacancy">
 <a href="#" title="Вакансии"><img src="/templates/sw/images/4.png" /></a>
 </li>
 <li class="faq">
 <a href="#" title="Частые вопросы"><img src="/templates/sw/images/5.png" /></a>
 </li>
</div>

CSS

#topm {
	float: left;
	width: auto;
	height: 40px;
 margin-left: 180px;

}

#topm li {
 list-style: none;
 float: left;
 position: relative;
 margin: 0;
 padding: 0;
 top: 10px;
 width: 140px;
 }

 #topm li a:hover {
 background-image:url(../images/onh.png);

 }

 #topm li a:hover span {
	 background-image:url(../images/onh.png);
 background-position: 0 -29px;
 }

 #topm li.about { width: 140px;  } #topm li.facility { width: 140px; } #topm li.portfolio { width: 140px; } #topm li.vacancy { width: 140px; } #topm li.faq { width: 140px; } 

Буду рад любой помощи и подсказкам

[Nanto]

Дайте ссылку! Кусок кода с вашими background-image:url(../images/onh.png) бесполезен для не телепатов.

Ну по-первому могу подсказть что-то типа:

#topm li a{

display:block;

width:100%;

height:100%;

}

#topm li a:hover span {         background-image:url(../images/onh.png); background-position: 0 -29px; }

- вот это к чему? У Вас в коде где-то <span> есть? Может от того и не работает?

По второму пукту - показывайте страницу! Непонятно как реализован переход по пунктам меню.

[skifus]

Дайте ссылку! Кусок кода с вашими background-image:url(../images/onh.png) бесполезен для не телепатов.

Ну по-первому могу подсказть что-то типа:

#topm li a{

display:block;

width:100%;

height:100%;

}

#topm li a:hover span {         background-image:url(../images/onh.png); background-position: 0 -29px; }

- вот это к чему? У Вас в коде где-то <span> есть? Может от того и не работает?

По второму пукту - показывайте страницу! Непонятно как реализован переход по пунктам меню.

<a href="#" title="Услуги">

Вот собственно все видно - на картинку назначаю линк, от того и переход.

Насчет ссылки - локально на денвере все делаю, верстка не мое, просто очень надо. Мануала подробного не нашел только по конкретно этой задаче

#topm li a{
display:block;
width:100%;
height:100%;
}

Подошло, заработало, огромное спасибо.

А по <span> вот так изначально было из этого гайда Моя ссылка

 <li class="about">
 <a href="#" title="О компании">О компании<span> </span></a>
 </li>

Только всеравно не работало

[Nanto]

Блин!

Хорошо, давайте разжёвывать - я кликаю по ссылке, меня куда-то должно отправить (или что-то произойти)... Куда? У Вас там якоря прописаны? урлы? Если урлы - то куда они ведут? Полностью загружается новая страница (отдельный шаблон) или только меняется контент (не трогая обёртку)?

[skifus]

Меняется контент внутри страницы

По вышесказанному дальше - для меня темный лес

[Nanto]

Тогда без вариантов надо исходный код смотреть. К тому же я никогда не имел дело с какой-либо CMS.