CSS - adding another elements on hover state - css

Question

All,
I have a horizontal menu bar. When the user hovers over each link in the menu bar, I want to show a small triangle underneath the link.
This small triangle is not an image but is rendered by CSS border syntax. Image and code below:
Here is the CSS code for the triangle:
#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;
I want to add the triangle to the menu item in hover state.
Can someone please advise how to go about adding this id to the hover state. I thought about using two classes for the items in the menu bar but its not working out. Here is the html code:
<div id="main_bar">
<ul>
<li class="maintabs maintabs_tri">Overview</li><li class="maintabs maintabs_tri">Collar/ Neckline</li><li class="maintabs maintabs_tri">Sleeves
<ul>
<li class="s_leftright">Left Sleeves</li>
<li class="s_leftright">Right Sleeves</li>
</ul></li><li class="maintabs maintabs_tri">Body</li>
</ul>
</div>
And the CSS, which doesnt work:
.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

You are going to need to place it on all items, but only display it on hover, i.e.
<ul>
<li>
Whatever <span></span>
</li>
<li>
Whatever <span></span>
</li>
<li>
Whatever <span></span>
</li>
</ul>
In this case, span is going to be the triangle. I'm assuming you've already styled your ul an li appropriately. So, in your 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%;
}
I'm nesting it within the anchor because that maximizes the clickable area.