Arrow image in active bootstrap tab

HTML & CSS
1

When in active tab, there is an arrow image under the tab but it is covered by red color tab image. May I know how to fix it?

http://jsfiddle.net/DJHZb/15/ (This file show the arrow image w/o red tab image)

This file shown the arrow image covered by red tab color:

.nav-tabs2 .active { background-image:url(/mod/images/menu-arrow.png); background-repeat:no-repeat; background-position:bottom center; }

<div class=“box-head tabs”>
<ul class=“nav2 nav-tabs2”>
<li class=“active”>
<a href=“#0” data-toggle=“tab” class=“firstelement”>Active Tab</a></li>
<li><a href=“#1” data-toggle=“tab”>Inactive Tab</a></li>
<li><a href=“#2” data-toggle=“tab”>Inactive Tab #2</a></li>
</ul>
</div>

There is example how the arrow image look like when in actived tab:
www.asiarooms.com/en/malaysia/kuala_lumpur/264278-the_courtyard_boutique_hotel.html

2

Yes, a background image on the LI is no use, because the content of the LI cover it over. If you gave the LIs a height of, say, 44px, and removed the bg color on the UL, you would see the arrow, but that’s not very practical.

Another option would be to use :before or :after on the LI (or <a>), put the arrow on it as a bg image, and position it absolutely at the bottom of the element. You’d just give the parent element position relative.