OverlappingTabs-css

.tab-menu {
    display: inline-block;
    list-style-type: none;
    height: 32px;
    margin:0 0 0 20px;
    paddin:0;
    font-size: 12px;
}
html[xmlns] .tab-menu {
    display: block;
    padding: 0;
}
* html .tab-menu {
    height: 1%;
}
.tab-menu:after {
    display: block;
    visibility: hidden;
    height: 0;
    content: ".";
    clear: both;
}

.tab-menu li {
    float: left;
    height: 32px;
    margin:0 0 0 -20px;
    padding:0;
}
.tab-menu a {
    cursor: hand;
    display: inline-block;
    height: 32px;
    outline: none;
    padding-right: 31px;
    color: #555555;
    text-decoration: none;
    background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_right_off.gif);
    background-repeat: no-repeat;
    background-position: right top;
    position: relative;
    z-index: 0;
}
html[xmlns] .tab-menu a {
    display: block;
}

.tab-menu a span {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    padding: 0 1em;
    background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_back_off.gif);
    background-repeat: no-repeat;
    background-position: left top;
    white-space: nowrap;
    position: relative;
    z-index: 0;
}
html[xmlns] .tab-menu a span {
    display: block;
}

.tab-menu a.active {
    color: #FFFFFF;
    background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_right_on.gif);
    z-index: 500;
}
.tab-menu a.active span {
    background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_back_on.gif);
    z-index: 500;
}

.tab-menu a:hover {
    color: #FFFFFF;
    background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_right_on.gif);
    border: 0;
    height: 32px;
    z-index: 1000;
}

.tab-menu a:hover span {
    background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_back_on.gif);
    border: 0;
    z-index: 1000;
}