CSS Triangle Under Button - css

Question

What I am trying to accomplish on :hover.
.nav li {
margin: 12px 0 0 20px; padding: 0;
color: #000; font-weight: 700;
display: inline-block;
}
.nav li+li:hover {
background: #2f3343;
padding: 5px 10px 5px 10px;
margin: 0 -2px 0 20px;
border-radius: 2px;
font-weight: 700;
border: none;
}
.nav .triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 12.5px 0 12.5px;
border-color: #000000 transparent transparent transparent;
}
I would like to put the triangle in the :hover but it's completely messed up. Do I need to set a specific height and add a position?

Answer 1

Try this
i create a new
.nav li {
margin: 12px 0 0 20px; padding: 0;
color: #000; font-weight: 700;
display: inline-block;
padding: 5px 10px 5px 10px;
position:relative;
border-radius: 2px;
}
.nav li:hover {
background: #2f3343;
border: none;
}
.nav li:hover:after {
content:"";
border-style: solid;
position: absolute;
left: 50%;
bottom: -10px;
margin-left:-10px;
border-width: 10px 12.5px 0 12.5px;
border-color: #000000 transparent transparent transparent;
}
Demo

Answer 2

Try the following css:
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000;
margin-left: 15px;
display: none;
}
button:hover + .arrow {
display: block;
}
I have made a JSFiddle similar to this. Have a look and provide your comments.