помогите доверстать закладки

[p4sh0k]

есть уже практически готовое решение..
но в верстке есть одно но
у закладок язычок (который справа) всегда должен вылезать поверх следующей закладки
КРОМЕ случая когда дельше идет активная закладка
код выдает jQuery.. я записал вариант кода который получается как раз после обработки скриптом
в HTML файле желательно (но не обязательно) ничего не менять..
я там пробовал и z-index и вроде все значения верные ввожу.. но никак и все тут
помогите плиззз.. я уже всю голову себе сломал как это сделать

исходный код с картинками приложил архивом к письму

HTML

<div style="margin:5px; padding:5px; width:500px; border:1px solid #aaa">
<ul class="ui-tabs-nav">
<li style='float:left;list-style:none'><a href='#news'>Новости</a><span>  </span></li>
<li style='float:left;list-style:none' class="ui-tabs-selected"><a href='#spletni'>Сплетни</a><span>  </span></li>
<li style='float:left;list-style:none'><a href='#reviews'>Обзоры</a><span>  </span></li>
<li style='float:left;list-style:none'><a href='#interviews'>Интервью</a><span>  </span></li>
<li style='float:left;list-style:none'><a href='#polls'>Опросы</a><span class='last-tab-span'>  </span></li>
</ul>
<div class="hr" style="margin: 0 6px 0 6px; padding: 0 0 5px 0; position:relative; z-index:1000; background:#fff"> </div>
</div>

CSS

/* Skin */
.ui-tabs-nav {
    font-size: 12px;
    list-style: none;
    margin: 0; position:relative; z-index:1;
    padding: 7px 0 0 18px;
}

/* for all tabs */
.ui-tabs-nav li {
    position:relative; float:left; z-index:100;
    margin:0; padding:0; padding-right:10px; margin-right:11px;
	background:#fff url('tabs_bg.gif') top left repeat-x;
	list-style:none; list-style-image: none;
	margin-left:-11px;
}
.ui-tabs-nav li a {
	float:left; padding:3px 2px 3px 7px; top:0; left:-2px; z-index:1;
	text-decoration: none; display:block; position:relative;
	background:url('tabs_l.gif') top left no-repeat;
}.ui-tabs-nav li a:link, .ui-tabs-nav li a:visited { color: #094d6d }
.ui-tabs-nav li span {
	display:block; position:absolute; z-index:300;
	right:-15px; top:0; height:25px; width:25px;
	background:url('tabs_r.gif') top right no-repeat;
}
.ui-tabs-nav li span.last-tab-span { background:url('tabs_end.gif') top right no-repeat }

/* for selected tab */
.ui-tabs-nav li.ui-tabs-selected { background:#e6e8ed url('tabs_act_bg.gif') top left repeat-x; z-index:200; }
.ui-tabs-nav li.ui-tabs-selected a { z-index:400; background:url('tabs_act_l.gif') top left no-repeat; font-weight:bold; cursor:default }
.ui-tabs-nav li.ui-tabs-selected span { z-index:400; background:url('tabs_act_r.gif') top right no-repeat }
.ui-tabs-nav li.ui-tabs-selected span.last-tab-span { background:url('tabs_act_end.gif') top right no-repeat }

/* for IE hack */
* html .ui-tabs-nav { margin-left:12px }
* html .ui-tabs-nav li span { top:-1px; right:-16px }
* html .ui-tabs-nav a { left:-2px }
:first-child+html .ui-tabs-nav li span { top:-1px }
:first-child+html .ui-tabs-nav a { left:-2px }
html>body .ui-tabs-nav li span { top:-1px }
html>body .ui-tabs-nav a { left:-2px }

/* don't change */
div.hr{
	border-top: 1px solid #c7c7c7;
	border-bottom:none;
	font-size:1px;
	height:1px;
	line-height:1px;
	margin: 5px 0;
	clear:both;
}