Setinha in menu with CSS only

Question

Setinha in menu with CSS only

Navigation

#1 by (3 votes)

1

Arrow below the drop down menu? I'm trying to make a little dropdown menu, so I used the following code:

But the z-index ( other objects are getting on top of it ) in this code does not work and I also wanted it to only appear in : hove r ( when hovering over the button).

link (example of the balao2)

I want to put this layout:

link

The solution has to exist in CSS, I did not find any similar question.

<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>

css

asked by anonymous 08.07.2015 / 20:45

1 answer

Create a random combination with CSS classes using javascript or jquery Inhibit RequiredRoleInterceptor information in demoiselle log

score 3 · Accepted Answer

The hover problem is simple, just merge the use of two pseudo selectors: :hover and :after :

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

On the problem of z-index , if I understand it correctly, just move it to .dropdown:hover , which works, look at it (I took advantage to increment .dropdown with spacing and float to simulate the display of several .dropdown s in sequence):

.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>