TO USE THIS SNIPPET:
1) Copy the following CSS and then open your existing theme stylesheet and paste it at the very bottom of the sheet (The style sheet is typically located inside of directory "wp-content/themes/yourthemename/" and called "custom.css" if you are using one of our modified WooThemes or "style.css" for most other themes);

2) Copy the following HTML snippet and paste it into your new blog post or page, be SURE to use the HTML editor tab and NOT the visual editor tab (which will not accept code).


----------------Start CSS - Do Not Copy This Line --------------------------

/* Style for css-tabs Submenu */
/* root element for tabs  */
ul.css-tabs {  
	margin:0 !important; 
	padding:0;
	height:30px;
	border-bottom:1px solid #666;	 	
}

/* single tab */
ul.css-tabs li {  
	float:left;	 
	padding:0; 
	margin:0;  
	list-style-type:none;	
}

/* link inside the tab. uses a background image */
ul.css-tabs a { 
	float:left;
	font-size:13px;
	display:block;
	padding:5px 30px;	
	text-decoration:none;
	border:1px solid #666;	
	border-bottom:0px;
	height:18px;
	background-color:#efefef;
	color:#777;
	margin-right:2px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright:4px;
	position:relative;
	top:1px;	
}

ul.css-tabs a:hover {
	background-color:#F7F7F7;
	color:#333;
}
	
/* selected tab */
ul.css-tabs a.current {
	background-color:#ddd;
	border-bottom:2px solid #ddd;	
	color:#000;	
	cursor:default;
}

	
/* tab pane */
.css-panes div {
	display:none;
	border:1px solid #666;
	border-width:0 1px 1px 1px;
	min-height:150px;
	padding:15px 20px;
	background-color:#ddd;	
}

/* end css-tabs*/



----------------End CSS - Do Not Copy This Line --------------------------



----------------Start HTML - Do Not Copy This ----------------------------

<!-- include the Tools Library -->
<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js?select=full&debug=true"></script>

<!-- tabs -->
<ul class="css-tabs">
	<li><a href="#">First Tab Title</a></li>
	<li><a href="#">Second Tab Title</a></li>
	<li><a href="#">Third Tab Title</a></li>
</ul>

<!-- panes -->
<div class="css-panes">

	<div>
		<p>
                       Content inside first tab pane
		</p>			
	</div>
	
	<div>
		<p>
                       Content inside second tab pane
		</p>		
	</div>

	
	<div>
		<p>
                       Content inside third tab pane
		</p>		
	</div>
</div>

<!-- activate tabs with JavaScript -->

<script>
$(function() {
	// :first selector is optional if you have only one tabs on the page
	$(".css-tabs:first").tabs(".css-panes:first > div");
});
</script>


----------------End HTML - Do Not Copy This ----------------------------

Using JQuery Tools to Add a Tabbed Submenu to Pages and Posts

HTML