After much help and research i have found what i need. I can make the demo work but need to be able to get it to work on my page. Now i have the code i think it may be easier for those kind people to help me as i dont think i was clear before.

this is what i need (in a fashion)

http://www.bushcottages.co.uk/loaddata.htm

But in my page i need to be able to click on the algebra link in the horizontal menu and the topics load in the main menu to the left. As you can see i have it slightly wrong as i am trying to adapt the script.

http://www.bushcottages.co.uk/new2.htm

I am so close to it i can feel it. Please stick with me guys

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mathematics Learning Zone</title>
<meta name="description" content="Learn Key Stage 4 Mathematics and Achieve a Grade C.">
	<meta name="keywords" content="Maths, Mathematics, Key Stage 4, Key Stage 4 Maths, GCSE Maths, Maths Grade C">
	<meta name="author" content="Peter Devlin">

<script type="text/javascript" src="java/jquery-1.5.min.js"></script>

<script type="text/javascript" src="http://www.bushcottages.co.uk/java/jquery.newsTicker-1.2.2.js"></script>
			<script type="text/javascript">
			<!--
			$(document).ready(function() {
				if (document.getElementById('news')) {
					var options = {
						newsList: "#news",
						tickerRate: 20,
						loopDelay: 6000,
						startDelay: 10,
						placeHolder1: "_"
					}
					$().newsTicker(options);
				}
			});
			-->
			</script>
			
<script type="text/javascript">

$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	
	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});

});
</script>

<script type="text/javascript">
var newwindow;
function poptastic(url)
{
	newwindow=window.open(url,'brainteasersolution.htm','height=400,width=400,left=40%,top=20%');
	if (window.focus) {newwindow.focus()}
}
</script>

<script type="text/javascript">
$(document).ready(function()
 {
  $("#loadData").click(function()
   {
    $(this).text("...One Moment Please...");
     $("#container").append('<div id="algebramenu"></div>')
                    .children("#algebramenu").hide()
                    .load("algebra.htm ul#algebramenu", function()
                     {
                      $("#loadData").remove();
                      $("#algebramenu").slideDown("slow");
                     });
   return false;
   });
});

</script>

<style type="text/css">

*
{
border: 0;
margin: 0;
padding-top:0;
}
#topmargin
{
width:900px;
height:5px;
margin:auto;
}

#banner
{
	width: 900px;
	height: 70px;
	background-image: url('banner.png');
	margin: auto;
	margin-bottom: 5px;
	background-color: #000066;
}

#horizontalmenu
{
	width: 900px;
	height: 25px;
	margin: auto;
	margin-bottom: 5px;
	background-color: #000066;
}

#horizontalmenu ul
{
list-style-type: none;
margin: 0px;
padding: 2px 0px 0px 0px;
}

	#horizontalmenu ul li
	{
	float: left;
	display: block;
	text-align: center;
	width: 300px;
	}

		#horizontalmenu ul li a 
		{
		text-decoration: none;
		font-family: georgia;
		font-size: 1em;
		color: #fafafa;
		}

		#horizontalmenu ul li a:hover
		{
		font-family: georgia;
		font-size: 1em;
		padding: 5px 40px 5px;
		color: #000000;
		background-color: #ffffff;
		}

#mainpage
{
	width: 900px;
	margin: auto;
}

#one
{
	float: left;
	width: 150px;
	height: 500px;
	margin-right: 5px;
}

#two
{
	float: left;
	width: 590px;
	margin-right: 5px;
}

#three
{
	float: left;
	width: 150px
}

#verticalmenu
{
	float: left;
	width: 150px;
}

	#verticaltopmenu
	{
	float: left;
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#verticalmainmenu
	{
	float: left;
	width: 146px;
	height: 400px;
	text-decoration: none;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	padding-top: 2px;
	padding-bottom: 2px;
	}

		#verticalmainmenu ul
		{
		text-decoration: none;
		list-style: none;
		padding: 0px;
		margin: 0px;
		color: black;
		}

			#verticalmainmenu ul li 
			{
			list-style: none;
			text-decoration: none;
			display: block;
			padding: 0px;
			text-align: left;
			font-family: georgia;
			font-size: .8em;
			color: black;
			}

				#verticalmainmenu ul li a 
				{
				padding: 0px 0px 0px 5px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

				#verticalmainmenu a:hover 
				{
				background-color: white;
				color: #000066;
				}

#tickercontainer
{
	float: left;
	width: 586px;
	height: 21px;
	margin-bottom: 5px;
	border-color: #000066;
	border-style: solid;
	border-width: 2px;
}

	#tickersidetitle
	{
	float: left;
	width: 125px;
	height: 21px;
	background-color: #000066;
	}

	#tickercontent
	{
	float: left;
	width: 461px;
	height: 21px;
	padding: 0px;
	}

		ul#news
		{
		margin: 0px;
		height: 21px;
		padding: 0px 0px 0px 0px;
		}
	
			ul#news li
			{
			list-style: none;
			font-family: georgia;
			font-size: 14px;
			font-weight: bold;
			color: #004400;
			margin: 0px;
			padding: 0px 0px 0px 10px;
			}
 
				ul#news li a:link, ul#news li a:hover
				{
				color: #004400; 
				text-decoration: none; 
				}

#contentwindow
{
float: left;
width: 590px;
height: 500px;
}

	ul.tabs
	{
	width: 590px;						/*--Set width of container--*/
	height: 23px;						/*--Set height of tabs--*/
	margin: 0px;
	padding: 0px;
	float: left;
	list-style: none;
	border-bottom: 2px solid #000066;	/*--Set line at bottom of ul--*/
	}

		ul.tabs li
		{
		float: left;
		margin-right: 1px; 				/*adjusts gap between tabs*/
		height: 23px;					/*--Subtract 1px from the height of the unordered list--*/
		line-height: 23px; 				/*--Vertically aligns the text within the tab--*/
		margin-bottom: -2px;
		background: #000066;
		border-color: #000066;
		border-style: solid;
		border: 2px;
		}
		
			ul.tabs li a
			{
			text-decoration: none;
			color: #FFFFFF;	
			font-family: georgia;
			font-size: 14px;
			display: block;
			padding: 0 20px;
			}
			
			ul.tabs li.active a
			{
			color:#000000;
			border-color: #000066;
			border-style: solid;
			border: 2px;
			}
			
			ul.tabs li a:hover
			{
			background-color: #330099;
			border: 0px;
			}
						
			ul.tabs li.active, ul.tabs li.active a:hover		/*--Makes sure that the active tab does not listen to the hover properties--*/
			{ 
			color: #000000;
			background: #FFFFFF;
			border-color: #000066;
			border-style: solid;
			border: 2px 2px 2px 0px;
			border-bottom: 2px solid #FFFFFF; /*--Makes the active tab look like it's connected with its content--*/
			}

.tab_container {
	border: 2px solid #000066;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; 
	width: 586px;
	height: 400px;
	background: #FFFFFF;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}

#testsmenu
{
	float: left;
	width: 150px;
	margin-bottom: 5px;
}

	#teststopmenu
	{
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#testsmainmenu
	{
	float: left;
	width: 146px;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	}
		#testsmainmenu ul 
		{
		float: left;
		margin-top: 2px;
		margin-bottom: 2px;
		width: 146px;
		padding: 0px;
		}

			#testsmainmenu ul li 
			{
			font-family: georgia;
			font-size: 0.8em;
			list-style-image: url('test.png');
			margin-left: 30px;
			padding: 0px;
			text-align: left;
			}

				#testsmainmenu ul li a 
				{
				padding: 0px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

				#testsmainmenu ul li a:hover 
				{
				background-color: white;
				color: #000066;
				}
#downloadsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}

	#downloadstopmenu
	{
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#downloadsmainmenu
	{
	float: left;
	width: 146px;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	}

		#downloadsmainmenu ul 
		{
		float: left;
		margin-top: 2px;
		margin-bottom: 2px;
		width: 146px;
		padding: 0px;
		}

			#downloadsmainmenu ul li 
			{
			font-family: georgia;
			font-size: 0.8em;
			list-style-image: url('download.png');
			margin-left: 30px;
			padding: 0px;
			text-align: left;
			}

				#downloadsmainmenu ul li a 
				{
				padding: 0px 0px 0px 5px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

					#downloadsmainmenu ul li a:hover 
					{
					background-color: white;
					color: #000066;
					}
#worksheetsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}

	#worksheetstopmenu
	{
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#worksheetsmainmenu
	{
	float: left;
	width: 146px;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	}

		#worksheetsmainmenu ul 
		{
		float: left;
		margin-top: 2px;
		margin-bottom: 2px;
		width: 146px;
		padding: 0px;
		}

			#worksheetsmainmenu ul li 
			{
			font-family: georgia;
			font-size: 0.8em;
			list-style-image: url('worksheet.png');
			margin-left: 30px;
			padding: 0px;
			text-align: left;
			}

				#worksheetsmainmenu ul li a 
				{
				padding: 0px 0px 0px 5px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

					#worksheetsmainmenu ul li a:hover 
					{
					background-color: white;
					color: #000066;
					}

#weblinksmenu
{
	float: left;
	width: 150px;
	margin-bottom: 5px;
}

	#weblinkstopmenu
	{
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#weblinksmainmenu
	{
	float: left;
	width: 146px;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	}

		#weblinksmainmenu ul 
		{
		float: left;
		margin-top: 2px;
		margin-bottom: 2px;
		width: 146px;
		padding: 0px;
		}

			#weblinksmainmenu ul li 
			{
			font-family: georgia;
			font-size: 0.8em;
			list-style-image: url('links.png');
			margin-left: 30px;
			padding: 0px;
			text-align: left;
			}

				#weblinksmainmenu ul li a 
				{
				padding: 0px 0px 0px 5px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

					#weblinksmainmenu ul li a:hover 
					{
					background-color: white;
					color: #000066;
					}
					
p
{
	text-align: center;
	font-family: georgia;
	font-size: 1em;
	color: #FFFFFF;
	padding-top: 2px;
}

p.a
{
	text-align: center;
	font-family: georgia;
	font-size: 1em;
	color: #FFFFFF;
	padding-top: 0px;
}

p.b
{
	text-align: center;
	font-family: georgia;
	font-size: 1em;
	color: #000000;
	padding-top: 0px;
}

p.c
{
	text-align: center;
	font-family: georgia;
	font-size: 8px;
	color: #000000;
	padding-top: 0px;
}

</style>

</head>


<body>

<div id="topmargin"></div>
<div id="banner"></div>

<div id="horizontalmenu">
	<ul>
		<li><li><a href="#" id="loadData">Number and Algebra</a></li></li>
		<li><a href="url">Geometry and Measures</a></li>
		<li><a href="url">Statistics - Data Handling</a></li>
	</ul>
</div>

<div id="mainpage">

	<div id="one">
		<div id="verticalmenu">
			<div id="verticaltopmenu"><p>Main Menu</p></div>
			<div id="verticalmainmenu">
				<ul>
					<li><a href="url">Angles</a></li>
					<li><a href="url">Properties of Shapes</a></li>
					<li><a href="url">Circle Theorems</a></li>
					<li><a href="url">Geometry of Cuboids</a></li>
					<li><a href="url">2d and 3d Shapes</a></li>
					<li><a href="url">Area</a></li>
					<li><a href="url">Perimeter</a></li>
					<li><a href="url">Prisms</a></li>
					<li><a href="url">Surface Area</a></li>
					<li><a href="url">Using Pi</a></li>
					<li><a href="url">Volumes</a></li>
					<li><a href="url">Transformations</a></li>
					<li><a href="url">Scale</a></li>
					<li><a href="url">Coordinates</a></li>
					<li><a href="url">Vectors</a></li>
					<li><a href="url">Bearings</a></li>
				</ul>
			</div>
		</div>
	</div>

<div id="two">
	<div id="tickercontainer">
		<div id="tickersidetitle"><p class="a">Brainteasers</p></div>
		<div id="tickercontent">
			<ul id="news">
				<li>How many Degrees in a Triangle?</li>
				<li><a href="javascript:poptastic('brainteasersolution.htm');">Algebra - What is 4x = 20 - X? Click for answer</a></li>
				<li><a href="http://www.bushcottages.co.uk/1.htm">What is the most common class Called?</a></li>
			</ul>
		</div>
	</div>
	<div id="contentwindow">
		<ul class="tabs">
   			<li><a href="#tab1">Acute</a></li>
    		<li><a href="#tab2">Obtuse</a></li>
    		<li><a href="#tab1">Reflex</a></li>
    		<li><a href="#tab2">Vertex</a></li>
		</ul>

		<div class="tab_container">
 		<div id="tab1" class="tab_content">
        <p class="b">hello</p>
        <p class="c">Page Created by P.Devlin</p>
   		</div>
   		<div id="tab2" class="tab_content">
    	<p class="b">well done</p>
    	<p class="c">Page Created by P.Devlin</p>
    </div>
</div></div>
</div>
	

	<div id="three">
		<div id="testsmenu">
			<div id="teststopmenu"><p>Online Tests</p></div>
			<div id="testsmainmenu">
				<ul>
					<li><a href="url">Linear Graphs</a></li>
					<li><a href="url">Equations</a></li>
					<li><a href="url">Averages</a></li>
					<li><a href="url">Algebra</a></li>
					<li><a href="url">Tests</a></li>
				</ul>
			</div>
		</div>
	
		<div id="downloadsmenu">
			<div id="downloadstopmenu"><p>Downloads</p></div>
			<div id="downloadsmainmenu">
				<ul>
					<li><a href="url">Linear Graphs</a></li>
					<li><a href="url">Equations</a></li>
					<li><a href="url">Algebra</a></li>
					<li><a href="url">Tests</a></li>
				</ul>
			</div>
		</div>
	
		<div id="worksheetsmenu">
			<div id="worksheetstopmenu"><p>Worksheets</p></div>
			<div id="worksheetsmainmenu">
				<ul>
					<li><a href="url">Linear Graphs</a></li>
					<li><a href="url">Equations</a></li>
					<li><a href="url">Algebra</a></li>
					<li><a href="url">Tests</a></li>
				</ul>
			</div>
		</div>
	
		<div id="weblinksmenu">
			<div id="weblinkstopmenu"><p>Web Links</p></div>
			<div id="weblinksmainmenu">
				<ul>
					<li><a href="url">Linear Graphs</a></li>
					<li><a href="url">Equations</a></li>
					<li><a href="url">Algebra</a></li>
					<li><a href="url">Tests</a></li>
				</ul>
			</div>
		</div>
	</div>

</div>
</body>

</html>
the other page is http://www.bushcottages.co.uk/algebra.htm

Code:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Algebra</title>
</head>

<body>
<ul id="algebramenu">
	<li><a href="url">Integers</a></li>
	<li><a href="url">Powers and Roots</a></li>
	<li><a href="url">Index Laws</a></li>
	<li><a href="url">Fractions</a></li>
	<li><a href="url">Decimals</a></li>
	<li><a href="url">Percentages</a></li>
	<li><a href="url">Ratio</a></li>
	<li><a href="url">Proportion</a></li>
	<li><a href="url">Use of Symbols</a></li>
	<li><a href="url">Liner Equations</a></li>
	<li><a href="url">Inequalities</a></li>
	<li><a href="url">Interpret Graphs</a></li>
</ul>

</body>

</html>
Thanks you so much
Peter