автоматическое увеличекие ширины картинки заднего фона

[mastermedia]

Как добиться, чтобы белая линия, картинка заднего фона, автоматически увеличивала или уменьшала свою ширину в зависимости от размера содержимого ссылки?

Вот, как это выглядит на картинке

Привожу свой html и сss код данного меню

<div id="header_bottom">
	<ul class="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Become a member</a></li>
		<li><a href="#">Partners</a></li>
		<li><a href="#">About us</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

#header_bottom {
			background: #afafaf;
			height: 40px; 
		}


			.menu {
				list-style: none;
				margin: 0;
				padding: 0;
				text-align: center;
			}

				.menu li {
					display: inline;
				}

					.menu a {
						color: white;
						display: inline-block;
						padding: 10px 32px 10px 32px;
						text-decoration: none;
						font-size: 18px;
					}

					.menu a:hover {
						background: url(../img/line.png) no-repeat center bottom;
						padding-bottom: 2px;
					}

[Simel]

А зачем ты сделал картинку линий ? Не легче сделать просто border-bottom: 1px solid #fff; ??

А в menu a поставь отступы не padding , а margin.

Вот замени часть твоего кода css на это.

.menu a {
   color: white;
   display: inline-block;
   padding: 10px 0px 10px 0px;
   margin: 0px 32px 0px 32px;
   text-decoration: none;
   font-size: 18px;
}

.menu a:hover {
   border-bottom: 1px solid #fff;
   padding-bottom: 2px;
}

И все будет работать.

Edited August 11, 2012 by Simel