Пункт меню при наведении

[Digidie]

Здравствуйте! Есть такая проблема. При наведении на пункт меню блок как бы должен съежать вниз на пару пикселей. Изображение тут - . Уже всю голову поломал. Помогите пожалуйста!

[Modestes]

как вариант можно добавить border-top:2px solid #222; к LI в стилях при наведении :hover

[Digidie]

Тут немного не так. Это изображение так выглядит, будто сверху граница, на самом деле границы нет, вместо нее прозрачность. Ваш вариант хорош, но как я цвет подберу.

[gift]

Тогда добавьте margin-top или (лучше, пожалуй) сместите его с помощью top, задав position:relative;

[Modestes]

ну тогда вариант с position:relative;

или вот такой вариант http://jsfiddle.net/g5M5k/

кстати, можно взять и первый вариант и дополнительно в hover дописать border-color:none; т.е будет выводится граница без цвета

Edited July 3, 2012 by Modestes

[Digidie]

.top{
	list-style: none;
	margin-left: 255px;
}
.top li{
	float: left;
	height: 50px;
	background: url(../images/top_menu_bg.gif) repeat-x;
	margin-top: -12px;
	font-family: Arial;
	font-size: 19px;
	padding-top: 13px;
}
.top li.first{
	background: url(../images/first.png) no-repeat;
}
.top li a:link, .top li a:visited{
	color: #ffffff;
	text-decoration: none;
	padding: 13px 25px;
	background: url(../images/top_link_bg.jpg) no-repeat right;
}
.top li a:hover{
	background: url(../images/top_menu_hover.gif) repeat-x;
	color: #2281cd;

html

<div id="top_menu">
			<ul class="top">
				<li class="first"><a href="#">Главная</a></li>
				<li><a href="#">Каталог</a></li>
				<li><a href="#">О компании</a></li>
				<li><a href="#">Оплата</a></li>
				<li><a href="#">Контакты</a></li>
			</ul>
		</div>

А теперь что мне надо сделать, чтобы получилось как на скрине?

[NeoXidizer]

Тут немного не так. Это изображение так выглядит, будто сверху граница, на самом деле границы нет, вместо нее прозрачность. Ваш вариант хорош, но как я цвет подберу.

border-top: 2px solid transparent;

прозрачный цвет