Guilherme De Lima Campos 3 Denunciar post Postado Julho 29, 2014 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; } Compartilhar este post Link para o post Compartilhar em outros sites
jgustavo99 85 Denunciar post Postado Julho 29, 2014 Olá! Imagem para separar? Não entendi bem. Compartilhar este post Link para o post Compartilhar em outros sites
rikaschmitt 54 Denunciar post Postado Julho 29, 2014 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'); Compartilhar este post Link para o post Compartilhar em outros sites
Guilherme De Lima Campos 3 Denunciar post Postado Julho 29, 2014 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); } Compartilhar este post Link para o post Compartilhar em outros sites
rikaschmitt 54 Denunciar post Postado Julho 29, 2014 tenta um: "margin-left:10px;" Compartilhar este post Link para o post Compartilhar em outros sites
Guilherme De Lima Campos 3 Denunciar post Postado Julho 29, 2014 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. Compartilhar este post Link para o post Compartilhar em outros sites
rikaschmitt 54 Denunciar post Postado Julho 29, 2014 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. Compartilhar este post Link para o post Compartilhar em outros sites
Guilherme De Lima Campos 3 Denunciar post Postado Julho 29, 2014 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) Compartilhar este post Link para o post Compartilhar em outros sites