CSS - 加上上懸停狀態

Question

所有其他元素，

我有一個水平菜單欄。當用戶懸停在菜單欄中的每個鏈接上時，我想在鏈接下方顯示一個小三角形。

這個小三角形不是圖像，而是由CSS邊框語法呈現。圖像和下面的代碼：

下面是三角形的CSS代碼：

#css_arrow { 
    border-color: transparent transparent rgba(111,46,11,0.0) transparent; 
    border-style: solid; 
    border-width: 8px; 
    height: 0; 
    width: 0; 
    position: absolute; 
    top: 34px; 
    left: 78px; 

我想三角形添加到菜單項處於懸停狀態。

有人可以請建議如何去將此ID添加到懸停狀態。我想過在菜單欄中使用兩個類來處理這些項目，但沒有解決問題。下面是HTML代碼：

<div id="main_bar"> 
       <ul> 
        <li class="maintabs maintabs_tri"><a href="#">Overview</a></li><li class="maintabs maintabs_tri"><a href="#">Collar/ Neckline</a></li><li class="maintabs maintabs_tri"><a href="#">Sleeves</a> 
        <ul> 
         <li class="s_leftright"><a href="#">Left Sleeves</a></li> 
         <li class="s_leftright"><a href="#">Right Sleeves</a></li> 
        </ul></li><li class="maintabs maintabs_tri"><a href="#">Body</a></li> 
       </ul>   
      </div> 

而CSS，這不工作：

.maintabs_tri:hover { 
    border-color: transparent transparent rgba(111,46,11,1) transparent; 
    border-style: solid; 
    border-width: 8px; 
    position: absolute; 
    height: 0; 
    width: 0; 
    top: 32px; 
    left: 78px; 
} 

Answer 1

你將需要把它的所有項目，但只顯示其上懸停，即

<ul> 
    <li> 
     <a href="#">Whatever <span></span></a> 
    </li> 
    <li> 
     <a href="#">Whatever <span></span></a> 
    </li> 
    <li> 
     <a href="#">Whatever <span></span></a> 
    </li> 
</ul> 

在這種情況下，跨度將是三角形。我假設你已經適當地塑造了你的身材。所以，在你的CSS：

ul li a { 
    display: block; 
    width: 100px; 
    height: 32px; 
    float: left; 
    position: relative; 
} 

ul li a:hover span { 
    display: block; 
} 

ul li a span { 
    display: none; 
    border-color: transparent transparent rgba(111,46,11,1) transparent; 
    border-style: solid; 
    border-width: 8px; 
    height: 0; 
    width: 0; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
} 

我錨內築巢，因爲最大化的可點擊區域。