CSS Треугольник под кнопкой

Question

То, что я пытаюсь сделать на :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; 
} 

Я хотел бы поставить треугольник в :hover, но это совершенно перепутались. Нужно ли устанавливать определенную высоту и добавлять позицию?

Answer 1

Попробуйте

я создать новый

.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

Попробуйте следующий 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; 
} 

Я сделал JSFiddle похожее на это. Посмотрите и сообщите свои комментарии.