Rotating JQuery UI tabs

Been trying to fix this for an hour, no luck.

I have set the tabs up and they are rotating but the selected tab will not raise above using z-index but it wont work. I have used the ui tabs before but never rotating. Here is the code:

CSS:

#featured {
    height: 200px;
    position: relative;
    width: 310px;
}

#featured ul.ui-tabs-nav {
    left: 365px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 180px;
}

#featured ul.ui-tabs-nav li {
    color: #FFFFFF;
    font-size: 12px;
}

#featured .ui-tabs-panel {
    height: 186px;
    overflow: hidde开发者_StackOverflown;
    position: relative;
    width: 380px;
    z-index: 0;
}
#featured .ui-tabs-hide{
    display:none;
}
#featured li.ui-tabs-nav-item a {
    background: none repeat scroll 0 0 #FFFFFF;
    display: block;
    height: 57px;
    line-height: 15px;
    outline: medium none;
}
#featured li.ui-tabs-nav-item a:hover{
    z-index: 999;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    z-index: 999;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    z-index: 999;
}

HTML:

<div id="featured" >
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="http://localhost/devilishkiss/images/featured/menu1.png" /></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://localhost/devilishkiss/images/featured/menu2.png" /></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://localhost/devilishkiss/images/featured/menu3.png" /></a></li>
    </ul>
    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <a href="http://www.lulu.com/content/466605"><img src="http://localhost/devilishkiss/images/featured/stuk.png" /></a>
    </div>
    <!-- Second Content -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
        <a href="http://www.lulu.com/content/466605"><img src="http://localhost/devilishkiss/images/featured/jrabbit2011.png" /></a>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
        <a href="http://www.lulu.com/content/466605"><img src="http://localhost/devilishkiss/images/featured/fg_feat.png" /></a>
  </div>
</div>

JQuery:

<script language="javascript" type="text/javascript">
 $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "show"}}).tabs("rotate", 3000);
    });
</script>

So just to clarify the tabs have images that are partially hidden. when the tab is slected I want the tab to raise to the top of everything to show the full image.

All help appreciated Thanks Joe

I'm using this same approach. Because the selected class styles the list item, technically the list item will always sit behind it's contents. Our website uses this with both small thumbnail images and the popular "circle" thumbnails at the bottom. For the circles, I made sure the selected class cascaded below the list item (basically, making sure the selected item class overlapped the regular background image). And, this worked for me to get the selected image to overlap the regular image I'm putting on the LI tag. (I'm using an image sprite, so the first image is a grey dot at position 0 0 in the file, and the second image, a blue dot, appears 19 pixels down in the file.

Here's the order of the code I'm using in the CSS. (There's a ton of other code already in place on our site to style this... this is only the override).

#featured ul.circle li.ui-tabs-nav-item {
    background: url('../images/site/selected-item-circle.png') 0 0 no-repeat !important; 
    height:18px;
    width:18px;
    float:left;
    margin:0 0 0 7px;
}
#featured ul.circle li.ui-tabs-selected { 
    background:url('../images/site/selected-item-circle.png') 0 -19px no-repeat !important; 
    width:18px;
    height:18px;
    float: left;
    margin:0 0 0 7px;
}

One mistake I spot is $("#featured > ul").tabs. Try this:

$("#featured").tabs({fx:{opacity: "show"}}).tabs("rotate", 3000);

Another one is that, remove all the classes for the tabs:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab 1</a></li>
        <li><a href="#tabs-2">tab 2</a></li>
        <li><a href="#tabs-3">tab 3</a></li>
    </ul>

    <div id="tabs-1">
        content 1
    </div>

    <div id="tabs-2">
        content 2
    </div>
    <div id="tabs-3">
        content 3
    </div>

</div>

See the demo here: http://jsbin.com/uquyo3/