1

Seta em baixo do menu drop down? Estou tentando fazer uma setinha no menu dropdown, então eu usei o seguinte código:

Porém o z-index (outros objetos estão ficando em cima dele) neste código não funciona e também eu queria que ele só aparecesso no :hover (quando passa o mouse em cima do botão).

http://jsfiddle.net/Wagner/m0qyayf7/ (exemplo da setinha balao2)

estou querendo colocar neste layout:

https://coquus.xtechcommerce.com/forno-e-fogao

Segue o style que estou querendo implementar: (a classe que vou implementar se chama mesmo dropdown)

A solução tem que existir em CSS, não achei nenhuma questão parecida.

<style>
.dropdown:after {

content: "";

width: 0;
height: 0;

position: absolute;
z-index: 10;

border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000;

bottom: -10px;
left: 20%;
z-index: 15;
}
</style>
2
  • 1
    Não entendi, tem como montar um exemplo mostrando o que está dando errado?
    – bfavaretto
    Commented 8/07/2015 às 18:49
  • O que está dando errado é simples, não é a setinha que está dando errado mas sim que ela tem que aparecer apenas quando está em :hover. Ou seja quando passar o mouse por cima. Além disto ela fica por baixo do :hover do outro <li> e o z-index: não funciona. Commented 8/07/2015 às 18:52

1 Resposta 1

3

O problema do hover é simples, basta mesclar o uso de dois pseudo seletores: :hover e :after:

.dropdown:hover:after {
    /* css aqui */
}

Sobre o problema do z-index, se entendi direito, basta movê-lo para dentro de .dropdown:hover, que funciona, olha só (aproveitei para incrementar o .dropdown com espaçamento e flutuação para simular a exibição de vários .dropdowns em sequência):

.dropdown{
    background: #000;
    color: #fff;
    border-radius: 15px;
    width: 300px;
    height: 100px;
    position: relative;
    
    float: left;
    margin-top: 5px;
    margin-left: 5px;
    padding: 5px;
    z-index: 10;
}

.dropdown:hover {
    z-index: 15;
}

.dropdown:hover:after {

    content: "";

    width: 0;
    height: 0;

    position: absolute;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid red;

    bottom: -10px;
    left: 20%;
}
<div class="dropdown">Teste</div>
<div class="dropdown">Teste</div>
<div class="dropdown">Teste</div>
<div class="dropdown">Teste</div>
<div class="dropdown">Teste</div>
<div class="dropdown">Teste</div>

6
  • A entendi. E por que o z-index não funciona? Já tentei de tudo =/ Commented 8/07/2015 às 19:04
  • @FelipeJorge Porque o ::after está dentro da div, e não depois (apesar do nome).
    – bfavaretto
    Commented 8/07/2015 às 19:08
  • @FelipeJorge Acho que não dá para descobrir o problema do z-index apenas com o código CSS e HTML que nos passou (ou então eu não entendi), entretanto coloquei um exemplo com os objetos um ao lado do outro, e não com outros objetos em cima do balão dropdown. Espero que isso ajude! Caso contrário, considere compartilhar um pouco mais do seu código! :)
    – falsarella
    Commented 8/07/2015 às 19:10
  • @FelipeJorge Alterei minha resposta com uma alternativa para o z-index, colocando ele no .dropdown:hover. Acho que isso deve resolver.
    – falsarella
    Commented 8/07/2015 às 19:35
  • 1
    Eu testei, o que estava dando errado era que o elemento que estava em cima precisava de uma position: e também precisava de um z-index. Bom esta não é exatemente a resposta para minha pergunta, mas graças a você consegui resolver o problema. O elemento de baixo precisava de um LI Commented 9/07/2015 às 0:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .