title: Jquery UI Tabs - Multiple tabs (vertical) issue
body: <p>I have two tabs. Essentially, tabs within tabs. Here is an example: <strong>image: <a href="http://i45.tinypic.com/35k0uhg.png" rel="nofollow">http://i45.tinypic.com/35k0uhg.png</a></strong></p>
  
  <p><strong>Tabs</strong> is red <br>
  <strong>Sub-Tabs</strong> is blue <br/><br/></p>
  
  <p><strong>Tabs</strong> is supposed to be vertical (<em>working properly</em>) whereas the <strong>Sub-Tabs</strong> is horizontal. However as you can see above, the <strong>Sub-Tabs</strong> is also vertical. For some odd reasons, I cannot figure out how to make the <strong>Sub-Tabs</strong> horizontal while the <strong>Tabs</strong> stays vertical. </p>
  
  <p>The <strong>Sub-Tabs</strong> is supposed to look like this:</p>
  
  <p><strong>Image: <a href="http://i47.tinypic.com/k9c01d.png" rel="nofollow">http://i47.tinypic.com/k9c01d.png</a></strong></p>
  
  <p>Code for <strong>Tabs</strong></p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Codes for <strong>Sub-Tabs</strong></p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p><br/><br/><br/></p>
  
  <p>HTML Portion:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
      &lt;ul class="nav"&gt;
          &lt;li&gt;&lt;a href="#test"&gt;Testing Area&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#upgradereq"&gt;Upgrade Requirements&lt;/a&gt;&lt;/li&gt;
  
  
      &lt;/ul&gt;
  
      &lt;div id="test"&gt;
          &lt;div id="sub-tabs"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#helloworld"&gt;Hello World&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#main"&gt;Main&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;div id="helloworld"&gt;Hellow rold!&lt;/div&gt;
              &lt;div id="main"&gt;afsa&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="upgreadereq"&gt;afsa&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Your help is appreciated!</p>