Кодиране на меню

[amgcompany]

Здравейте, искам да направя едно меню, което изглежда по следният начин : http://prikachi.com/images/148/4267148S.jpg
Както забелязвате има чертички, които са след всяка връзка в менюто.
Написах кода но не се получава така както е снимката, получава се така :
http://prikachi.com/images/156/4267156d.jpg

Ето го и кода :

<div id="menu">
				
					<ul>
						<li> <a href="#">Начало</a> </li>
						<li> <a href="#">Новини</a> </li>
						<li> <a href="#">Настройки</a> </li>
						<li> <a href="#">dasds</a> </li>
						<li> <a href="#">dasds</a> </li>
						<li> <a href="#">dasds</a> </li>
						
					<ul>
					
				</div>

[css]
#menu ul li a
{
background : url('../pictures/line.png') no-repeat; /* това е картинката, която искам да се показва след всяка връзка в менюто*/
width:120px;
height:40px;

float:left;
text-decoration:none;
color:white;
font-family:verdana;
padding-left:15px;
}[/css]

Бихте ли ми помогнали малко, благодаря предварително

 

[lub4o]

[css]#menu ul li
{
background: url('images/menu-separrrr.png') no-repeat left top transparent;
}[/css]

Като картинката menu-separrrr.png ти е тази черта, която искаш.

 

[amgcompany]

Така се слепват едно до друго и се получават много наблъскани, а пък ако задам дължина се губи симетрията

 

[amgcompany]

Това със слепването едно до друго го оправих по следния начин
[css]background: url('../pictures/line.png') no-repeat left top transparent;
height:40px;
width:120px;
text-align:center;[/css]

Но ми слага линия пред първата връзка "Начало". Ето така :
http://prikachi.com/images/156/4267156d.jpg
Има ли някакъв вариант да се оправи, или поне да се направи така, че и след последната връзка да има линия

 

[lub4o]

background: url('../pictures/line.png') no-repeat right top transparent;
height:40px;
width:120px;
text-align:center;
padding: 0 0 0 5px;

 

[amgcompany]

Така линията се маха от пред първата връзка и се слага пред последната и така не изглежда много добре, а аз искам или да няма линия пред първото и зад последното или да има линия пред първото и зад последното, ето така:
http://prikachi.com/images/148/4267148S.jpg
Извинявам се, ако ставам нахален

 

[lub4o]

На първото Li сложи class="active"
и в css

#menu ul li.active
{
	background: none;
	padding:0;
}

а това

#menu ul li
{
background: url('images/menu-separrrr.png') no-repeat left top transparent;
}

 

[amgcompany]

Мерси, +1