menu horizontal com separador | <<

Pessoal,

tou engatinhando no CSS ainda e tenho que fazer um menu na horizontal com separador, tipo assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img203.imageshack.us/img203/6302/separadori.jpg&key=17e6836f00957f74a7d320c520c7bc00b318df02c385fb3850277b864549923c" alt="Imagem Postada" />

Uploaded with ImageShack.us

Obviamente entre esses espaços teria os escritos dos menus, de certa forma já consegui fazer o MENU com o seguinte códido:

#menu ul {

	padding:10px;
	width: 970px;
}

#menu ul li { display: inline; list-style:none;}

#menu ul li a {

	padding: 2px 20px;
	float:left;
 font: 16px Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica ;
	color:#565656;
	text-decoration: none;
}

#menu ul li a:hover {

 background-color:#D6D6D6;
}

Só que não sei como por os separadores e colocar ele no tamanho certo, olhem só meu resultado: http://www.reginaldolopes.com.br/v2/

Gostaria se possível me ajudem a colocar o separador e arrumar o tamanho do menu direitinho, pq quando coloca o mouse em cima não está preenchendo toda sua área...

Abs!!! vlw