css - two level tabs jquery -

I need two level tab navigation.

Basically this way:

Tab 1 Tab 2 Tab3

TabA TabB TabC

When User Clicks for Example 2 Then he can choose again from the second level tab (tabs, tabab, etc).

I can fix the first level but I can not make the second level. How can I put it in the first level tab?

Just nested the second set of tabs to your HTML set:

< Pre> & lt; Div id = "tabs" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "# tab-1" & gt; & Lt; Span & gt; A & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# Tab2" & gt; & Lt; Span & gt; Two & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# tab3" & gt; & Lt; Span & gt; Three & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "tab-1" & gt; & Lt; P & gt; The first tab is active by default. & Lt; / P & gt; & Lt; P & gt; The second tab includes nested tabs. & Lt; / P & gt; & Lt; / Div & gt; & Lt; Div id = "tab-2" & gt; & Lt ;! - Nested tabs! - & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "# nested-1" & gt; & Lt; Span & gt; A & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#Nested-2" & gt; & Lt; Span & gt; Two & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# nested-3" & gt; & Lt; Span & gt; Three & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "nested-1" & gt; Nest Tab 1 Content: The only content is used for the sole, integer, and non-duplicate .. & lt; / Div & gt; & Lt; Div id = "nested-2" & gt; Nest Tab2 Content: Torum Exposure Darrel Etet, Public Technologies Elite, Sade La Enrimidi ..

.. Prepare both on the document and in such a way:

  & lt; Script & gt; $ (Document) .ready (function () {$ ("# tab"). Tab (); $ ("# tab-2"). Tab ();}); & Lt; / Script & gt;  

In doubt, see the jQuery tab API documentation on

.