jquery set different positions on same class

I'm working with some jquery tabs. I have four dropdowns. Drop down one has four tabs. Drop down two has three tabs. And so on. The tabs are centered in the main drop down. I'm trying to position the same background color/image behind tab one of each tab set.

Currently I'm assigning different class names and then setting the position on those different class names (m4, m3, t4, t3). Is this the most effective way? Is there a way to simply control them without all the extra class names? The number of drop downs could grow which means the number of tabs could also. Which also means more class names.

Drop down one width: 1000px; Overall four tab width: 500px;

Drop down two width: 1000px; Overall three tab width: 375px;

So, from the left each set would have a different left position. I want to place that back ground image behind tab 1 of each set. Without the javascript below it puts it in the position of tab 1 set 1 for all the tab sets. Make sense?

The javascript

$('.m4').css({left:$('.t4').position()['left']});
$('.m3').css({left:$('.t3').position()['left']});

The HTML

<ul id="mainNavBar">
<li id="pos1"><a href="#"><span class="accesslinks">Category 1</span></a>
    <div class="menuDrop">
        <div class="slideContent">
        <div class="tabSlide">
开发者_开发百科            <ul>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
            </ul>
            <ul>
                <li>Product</li>
            </ul>
            <ul>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
            </ul>
            <ul>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
            </ul>
        </div>
        </div>
        <ul class="tabs">
            <div class="tabMove m4">&nbsp;</div>
            <li class="tab t4"><a href="#">Set 1</a></li>
            <li class="tab"><a href="#">Set 2</a></li>
            <li class="tab"><a href="#">Set 3</a></li>
            <li class="tab last"><a href="#">Set 4</a></li>
        </ul>
    </div>
</li>
<li id="pos2"><a href="#"><span class="accesslinks">Category 2</span></a>
    <div class="menuDrop">
        <div class="slideContent">
        <div class="tabSlide">
            <ul>
                <li>Product</li>
                <li>Product</li>
            </ul>
            <ul>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
            </ul>
            <ul>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
            </ul>
        </div>
        </div>
        <ul class="tabs">
            <div class="tabMove m3">&nbsp;</div>
            <li class="tab t3"><a href="#">Set 5</a></li>
            <li class="tab"><a href="#">Set 6</a></li>
            <li class="tab"><a href="#">Set 7</a></li>
        </ul>
    </div>
</li>