Question

I have two tabs. Essentially, tabs within tabs. Here is an example: image: http://i45.tinypic.com/35k0uhg.png

Tabs is red
Sub-Tabs is blue

Tabs is supposed to be vertical (working properly) whereas the Sub-Tabs is horizontal. However as you can see above, the Sub-Tabs is also vertical. For some odd reasons, I cannot figure out how to make the Sub-Tabs horizontal while the Tabs stays vertical.

The Sub-Tabs is supposed to look like this:

Image: http://i47.tinypic.com/k9c01d.png

Code for Tabs

#tabs {
    position: relative;
    padding-left: 14.5em; /* content */
    margin-right: 5px;
    padding-top: 20px;
    background: transparent;
    border: none;
    /*  height: 30em; */
}

#tabs .nav {
    position: absolute;
    left: 0.25em;
    top: 1.5em;
    bottom: 0.25em;
    width: 16em; /* tabs width */
    padding: 0.2em 0 0.2em 0.2em;
    background: transparent;
    border: none;
}

#tabs .nav li {
    right: 1px;
    width: 100%;
    border: none;
    overflow: hidden;
}

#tabs .nav li a {
    float: left;
    width: 100%;
    margin-bottom: 3px;
    height: 24px;
    padding-top: 14px;
    padding-left: 15px;
    font-weight: bold;
    color: #2e2e2e;
    background: #fff;
}

#tabs .nav li a:hover {
    cursor: pointer;
    background: #206fbf;
    color: #fff;
}

#tabs  .nav li.ui-tabs-selected a {
    cursor: pointer;
    color: #fff;
    background: #206fbf;
}

Codes for Sub-Tabs

#Sub-Tabs {
    background: transparent;
    border: none;
    position: none;
    list-style: none;
}
#Sub-Tabs .ui-widget-header {
    background: transparent;
    border: none;
    border-bottom: 1px solid #c0c0c0;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    position: none;
}
#Sub-Tabs .ui-state-default {
    background: transparent;
    border: none;
}
#Sub-Tabs .ui-state-active {
    background: transparent url(img/uiTabsArrow.png) no-repeat bottom center;
    border: none;
}
#Sub-Tabs .ui-state-default a {
    color: #c0c0c0;
}
#Sub-Tabs .ui-state-active a {
    color: #459E00;
}

HTML Portion:

<div id="tabs">
    <ul class="nav">
        <li><a href="#test">Testing Area</a></li>
        <li><a href="#upgradereq">Upgrade Requirements</a></li>


    </ul>

    <div id="test">
        <div id="sub-tabs">
            <ul>
                <li><a href="#helloworld">Hello World</a></li>
                <li><a href="#main">Main</a></li>
            </ul>

            <div id="helloworld">Hellow rold!</div>
            <div id="main">afsa</div>
        </div>
    </div>

    <div id="upgreadereq">afsa</div>
</div>

Your help is appreciated!

Answer 1

Seeing your HTML would help a little but the real problem is your CSS. #tabs .nav li is going to grab every li under every element with class .nav within element #tabs. In other words, you have extreme overlapping CSS here.

Try using some children selectors like:

#tabs .nav > li {}
/* Where ">" says 'Hey, grab only the li elements immediately within .nav!' */

Also, for more info on how jQueryUI does it, see here

Here is jsFiddle for you to work with and try out.