Script: DD Tab Menu
Link: http://www.dynamicdrive.com/dynamici...ddtabmenu2.htm

Hi, I recently discovered this script - something I had been looking for but my feeble javascript knowledge could not yet make itself. However, my site layout is different from the way the script <div> id's and such. I really didn't want to screw around with my already defined CSS, so I tried switching around things in the script (just ID names at this point). However, my <a> does not nest nice and fluidly between #ddimages. It's split up weird like this


HTML Code:
<!-- TOP NAVBAR -->
	<div class="navbar">

		
		<div class="nav1"><a href="#" class="nav" onmouseover="expandcontent('sc1',this)">Nav</a></div>
		
		<div class="nav2">
		
		<div class="innerNav1"><a href="#" class="nav" onmouseover="expandcontent('sc2',this)">Nav</a></div>
		<div class="innerNav2"><a href="#" class="nav" onmouseover="expandcontent('sc3',this)">Nav</a></div>

		</div>
</div>
and where I want the text to show up

HTML Code:
<div id="maincontent">
	<div id="border">tabcontents here...</div>
	<p>hey this is just a place to hold things for n0w</p>
	<!-- END MAINCONTENT -->
	</div>
And an excerpt from my CSS. As you can see, I'm trying to maintain the entire "box highlight" when you hover over the links as well as maintaining #border's colour...don't mind the other out of place colors, this is just a template for me atm.

HTML Code:
a.nav {
display:block;
text-decoration:none;
}

a.nav:link,a.nav:visited,a.nav:active {
text-decoration:none;
}

a.nav:hover {
text-decoration:underline;
background-color:#003399;
height:100%;
width:100%;
}

div#maincontent {
width:75%;
float:right;
background-color:#ffffff;
margin-top:0;
margin-bottom:0;
margin-right:10px;
margin-left:0;
/* border:1px solid #8b0000; */
}

#border {
background-color:#003399;
margin-right:10px;
width:100%;
}

div.navbar {
width:75%;
float:right;
background-color:#d7d7d7;
text-align:center;
margin-top:20px;
margin-right:10px;
margin-left:0;
margin-bottom:0;
}

.tabcontent {
display:none;
}

div.nav1 {
float:left;
border-right:1px inset #999999;
width:33%;
margin:0;
height:30px;
}

div.nav2 {
float:right;
width:67%;
margin-left:-1px;
}

div.innerNav1 {
float:left;
width:50%;
margin:0;
border-right:1px inset #999999;
height:30px;
}

div.innerNav2 {
float:right;
width:50%;
margin-left:-1px;
height:30px;
}

I guess the urgency for help on this script isn't immediate, since I may very well redesign my blueprints once again to try and implement lists instead of nested div's, but I still want this effect. Id probably format too, but I believe I"m capable of that once I get the script working.