Arrow in menu with CSS only

Asked

Viewed 2,303 times

1

Arrow under the drop down menu? I’m trying to make a arrow in the 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 also I wanted it only appear on :Hover (when you hover the mouse over the button).

http://jsfiddle.net/Wagner/m0qyayf7/ (example of the arrow balao2)

I’m wanting to put in this layout:

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

It follows the style I’m trying to implement: (the class I’m going to implement is really called dropdown)

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

    I don’t understand, it’s like putting together an example showing what’s going wrong?

  • What is going wrong is simple, it is not the arrow that is going wrong but rather that it has to appear only when it is in :Hover. That is when you hover over it. In addition, it is below the :Hover of the other <li> and z-index: does not work.

1 answer

3


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

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

About the problem of z-index, If I got it right, just move it inside .dropdown:hover, that works, look at it (I took the opportunity to increase the .dropdown with spacing and flotation to simulate the display of several .dropdowns 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>

  • I got it. And why doesn’t z-index work? I’ve tried everything =/

  • @Felipejorge Because the ::after is inside the div, and not after (despite the name).

  • @Felipejorge I don’t think we can figure out the problem of z-index only with the CSS and HTML code that passed us (or else I didn’t understand), however I put an example with the objects next to each other, and not with other objects on top of the dropdown balloon. I hope this helps! Otherwise, consider sharing a little more of your code! :)

  • @Felipejorge I changed my answer with an alternative to the z-index, putting him in the .dropdown:hover. I think that should do it.

  • @bfavaretto Now I think I understand a little better what the problem was with z-index. I didn’t realize he was wearing the :after, thank you!

  • 1

    I tested, what was going wrong was that the element on top needed a position: and also needed a z-index. Well this is not exactly the answer to my question, but thanks to you I managed to solve the problem. The bottom element needed an LI

Show 1 more comment

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.