按鈕下的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。看看並提供您的意見。