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:
http://jsfiddle.net/DJHZb/14/

.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:
http://www.asiarooms.com/en/malaysia...que_hotel.html