Como separar <li> por uma imagem

[Guilherme De Lima Campos 3]

Boa tarde a todos, tenho um menu horizontal no meu site, e entre os <li> quero colocar uma imagem para separar.

Gostaria de saber como fazer isso, segue a baixo meu código CSS e HTML do menu.

 

HTML

<div id="menu"> 
<nav>
  <ul class="menu">
    <li><a href="?pagina=principal" title="">PRINCIPAL</a></li>
    <li><a href="#" title="">FORNECEDORES</a>
      <ul>
        <li><a href="?pagina=lista-fornecedor">Listar Fornecedores</a></li>
        <li><a href="?pagina=cadastro-fornecedor">Cadastrar Fornecedor</a></li>
        <li><a href="?pagina=cadastro-contato">Cadastrar Contatos</a></li>
        <li><a href="?pagina=cadastro-endereco">Cadastrar Endereços</a></li>
      </ul>
    </li>
  </ul>
</nav>
</div>

CSS

#menu {
	background-image:url(../images/barra.jpg);
	width:100%;
	height:37px;
	z-index: 9999;	
}

.menu{
	list-style:none;
	float:left;
	line-height:27px;
	font:normal 130% 'Microsoft New Tai Lue';
	color:#F00;
	z-index: 9999;
}

.menu li{
	position:relative;
	float:left;
	z-index: 9999;
}

.menu li a{
	color:#FFF; text-decoration:none; padding:0 10px; display:block;
	line-height:37px;
	z-index: 9999;
}
 
.menu li a:hover{
	color:#FFF;
	-webkit-box-shadow:0 0 10px 0 #ccc;
	z-index: 9999;
}

.menu li  ul{
	background-color:#000;
	position:absolute;
	top:37px;
	left:0;
	display:none;
	z-index: 9999;
}  

.menu li:hover ul, .menu li.over ul{
	display:block;
	background:#333;
	z-index: 9999;
	font:normal 70% 'Microsoft New Tai Lue';
}

.menu li ul li{
	display:block;
	width:150px;
	z-index: 9999;
}

[jgustavo99 85]

Olá! Imagem para separar? Não entendi bem.

[rikaschmitt 54]

Você pode usar uma tag <img> entre os links..

 

Ou

 

Você pode estilizar o item do menu pelo css, usando:

list-style-image: url('IMAGEM');

[Guilherme De Lima Campos 3]

 

Você pode usar uma tag <img> entre os links..

 

Ou

 

Você pode estilizar o item do menu pelo css, usando:

list-style-image: url('IMAGEM');

Cara, exatamente o que eu precisava, so preciso colocar uma margem esquerda de 10px na imagem. Como posso fazer isso?

Segue o código:

.menu li{
	position:relative;
	float:left;
	z-index: 9999;
	list-style-image: url(../images/divider.jpg);
}

[rikaschmitt 54]

tenta um: "margin-left:10px;"

[Guilherme De Lima Campos 3]

tenta um: "margin-left:10px;"

 

Sim, ficou certo, porém pensei que isso resolver meu problema, mais não resolver.

Da uma olhada nos links, ficaram no final da div.

 

[rikaschmitt 54]

 

Sim, ficou certo, porém pensei que isso resolver meu problema, mais não resolver.

Da uma olhada nos links, ficaram no final da div.

 

 

Não tenho certeza, mas talvez usar um "line-height: VALORpx;" ajude a ajustar o alinhamento dos links.

[Guilherme De Lima Campos 3]

 

Não tenho certeza, mas talvez usar um "line-height: VALORpx;" ajude a ajustar o alinhamento dos links.

Nada, continua a mesma coisa (OBS.: coloquei 37px=height da div)