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%; 
} 

我锚内筑巢，因为最大化的可点击区域。