:after :before em lista <li> <ul>

[McDevian 0]

olá caros amigos, estou precisando de um help ... fiz um menu drop-down onde pretendia simular o menu do submarino, onde tem borda sombreada, pesquisei muito mas não achei. segue meu codigo

 

/* IMAGEM DO CENTRO */
 .menu-hv li:hover ul,  .menu-vv li:hover ul,
 .menu-hv li.hover ul,  .menu-vv li.hover ul { visibility: visible; background:url(../../images/menuDrop_r2_c1.jpg) center no-repeat; }
 
/* IMAGEM DO TOPO */
 .menu-hv:before li:hover ul,  .menu-vv:before li:hover ul,
 .menu-hv.before li.hover ul,  .menu-vv.before li.hover ul { visibility: visible; background:url(../../images/menuDrop_r1_c1.jpg) center no-repeat; }

/* IMAGEM DA BASE */
 .menu-hv:after li:hover ul,  .menu-vv:after li:hover ul,
 .menu-hv.after li.hover ul,  .menu-vv.after li.hover ul { visibility: visible; background:url(../../images/menuDrop_r3_c1.jpg) center no-repeat; }

pensei que conseguiria com after e before, mas não consigo, alguem poderia me ajudar ?? como o submarino faz aquele menu com bordas e sombras.

[Evandro Oliveira 331]

não olhei a folha de estilos, mas posso arriscar o seguinte palpite (eu faria assim)

 

 

ul#pai -> contém as bordas azuis e fundo branco, largura absoluta definida, fundo repetido em Y

ul#pai li -> contém a imagem das flechas como background, alinhadas à direita, sem repetição, posicionamento definido em relative

 

ul#pai li:hover -> recebe uma borda cinza de 1px solida, e a borda inferior de 3px

ul#pai li:hover {
  border: 1px solid gray;
  border-bottom-width: 3px;
}

dentro de cada <li> pai, existirá uma <ul> filha de largura absoluta definida, posicionamento absoluto, e recuo de aproximadamente 30px. Em repouso, o display eh none

ul#filha {
  left: -30px;
  position: absolute;
}

cada <li> dentro da filha, possui a mesma flechinha como list-style, largura e altura definidas

 

a primeira <li> recebe o ID first e a última recebe o id last

ul#filha li#first { background: url(submenu_superior.png) top left no-repeat; }
ul#filha li#last { background: url(submenu_inferior.png) bottom left no-repeat; }

a ul#filha é exibida ao apontar o mouse sobre a <li> pai correspondente

ul#pai li:hover ul#filha { display: block; }

 

como não estou testando, o resultado final pode ser diferente do esperado.. mas o resumo ficaria assim:

 

<ul class="pai">
  <li>Livros & Arte
    <ul>
      <li id="first">Livros</li>
      <li>Livros importados</li>
      <li>Galeria de Arte</li>
      <li id="last">Papelaria</li>
    </ul>
  </li>
  <li>CDs, DVDs & Games</li>
</ul>

.pai {
background: url(bordas_azuis.jpg) repeat-y;
padding: 7px;
width: 150px;
}

.pai li {
background: url(flechinha.jpg) right no-repeat;
position: relative;
width: 150px;
}

.pai ul {
display: none;
left: -30px;
position: absolute;
}

.pai ul li {
background: url(bordas_cinza.jpg) repeat-y;
list-style-image: url(flechinha.jpg);
width: 300px;
}

.pai ul li#first {
background: url(bordas_arrendondadas_superior.jpg) top left no-repeat;
}

.pai ul li#last {
background: url(bordas_arrendondadas_inferior.jpg) bottom left no-repeat;
}

.pai li:hover {
border: 1px solid gray;
border-bottom-width: 3px;
}

.pai li:hover ul {
display: block
}

[McDevian 0]

Matou a pau Evandro, de quebra já ajudou no que queria, vlw...

 

só pra finalizar.. as tags de lista li e ul não dão suporte a before e after ?? tentei de varias maneiras mas não encaixaram por nada. e de fato não achei nada na internet sobre o assunto..

 

moderador.. depois da minha duvida pode fechar como resolvido...

[Evandro Oliveira 331]

sempre que for possível dispensá-las... evite... poupa dores de cabeça para fazer funcionar corretamente no IE6

 

Não achei as referências na W3C [mas que tem, tem], mas o developer center da Mozilla cita:

 

":before cria um pseudo-elemento que é a primeira filho do elemento selecionado. Tipicamente usado para adicionar conteúdo cosmético a um elemento. Este elemento é inline por padrão."

É como se você criasse um <li> ANTES da <li>Livros & Arte</li> totalmente em CSS [nem preciso mencionar que o IE6 entraria em parafuso]

O artigo cita também que o padrão do elemento é inline, então para conseguir o efeito desejado, você teria que definir o display em block e dar largura e altura para o elemento

 

Pelo que pude entender do artigo, a sua CSS deu problema devido ao uso de: .menu-hv:before li:hover ul

Essa regra faria referência à TODAS AS <ul> DENTRO DE UMA <li> DENTRO DE UM ELEMENTO CRIADO VIA CSS

Resultado: elemento não encontrado!

 

o uso das regras com :after e :before deve morrer nelas

div#conteudo:after { content: url(imagem_de_rodape) }

"Correto"

div#conteudo:before div#cabecalho { content: url(imagem_de_cabecalho) }

"Errado"

 

 

no caso para uso do nosso menu, as imagens seriam colocadas antes e depois de todas as <ul> filhas

 

#pai ul:before { content: url(bordas_arredondadas_superior.jpg) }
#pai ul:after { content: url(bordas_arredondadas_inferior.jpg) }

Se errei em alguma coisa, sintam-se livres para postar correções. Definitivamente o material na WEB sobre :after e :before é pobre

 

 

EDIT: A propriedade CONTENT é obrigatória!