列表懸停上的CSS箭頭

Question

我有一個列表菜單，邊框的寬度爲1px ... 100％。

見圖片1：

現在到了最困難的部分。當鼠標在我需要這個項目下發生的菜單項徘徊徘徊：

見圖片2：

我怎樣才能做到這一點？我一直在Google上搜索，沒有發現任何東西。

Answer 1

使用相對定位列表項具有旋轉，絕對定位後給你一個可能的解決方案組合：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
ul li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    padding: 1em 3em; 
 
    margin-right: -4px; 
 
    border-bottom: 1px solid black; 
 
    position: relative; 
 
} 
 
ul li:hover:after { 
 
    content: ' '; 
 
    display: block; 
 
    height: 16px; 
 
    width: 16px; 
 
    background: white; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -8px; 
 
    transform: rotate(45deg); 
 
    bottom:-9px; 
 
    border-left: 1px solid black; 
 
    border-top: 1px solid black; 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
</ul>