making top navbar into tabs

I'm having a hard time in figuring out how to make the top navigation bar into tabs. I want to bring the buttons down to the edge of the rectangle:

<div id="navbar" style="border: medium none ; margin: 0px; padding: 30px 5px 0px 180px; float: left; background-color: rgb(246, 245, 227); width: 100%; height: 60px;">
<ul style="margin-bottom: 0px; font-family: Monotype Corsiva,Verdana,Arial,Helvetica,sans-serif; font-size: 18px; font-weight: bold; color: rgb(81, 81, 81); list-style-type: none; height: 25px;">
<li style="border: 1px solid rgb(188, 178, 179); margin: 0px 10px 0px 0px; padding: 0px; float: left; height: 30px; text-align: center; background-color: rgb(246, 245, 227);">
	<a href="JavaScript: bodyOnload();" style="text-decoration: none; color: rgb(81, 81, 81); display: block; background-color: rgb(246, 245, 227);" onmouseover="this.style.color='#FFFFAE'; this.style.backgroundColor='#D0CC73';" onmouseout="this.style.color='#515151'; this.style.backgroundColor='#F6F5E3';">
		<span style="padding: 4px 10px 0px; display: block;">Home</span>
	</a>
</li>
<li style="border: 1px solid rgb(188, 178, 179); margin: 0px 10px 0px 0px; padding: 0px; float: left; height: 30px; text-align: center; background-color: rgb(246, 245, 227);">
	<a href="JavaScript: getFlash();" style="text-decoration: none; color: rgb(81, 81, 81); display: block; background-color: rgb(246, 245, 227);" onmouseover="this.style.color='#FFFFAE'; this.style.backgroundColor='#D0CC73';" onmouseout="this.style.color='#515151'; this.style.backgroundColor='#F6F5E3';">

		<span style="padding: 4px 10px 0px; display: block;">Flash 8</span>
	</a>
</li>
<li style="border: 1px solid rgb(188, 178, 179); margin: 0px 10px 0px 0px; padding: 0px; float: left; height: 30px; text-align: center; background-color: rgb(246, 245, 227);">
	<a href="JavaScript: getIllustrator();" style="text-decoration: none; color: rgb(81, 81, 81); display: block;" onmouseover="this.style.color='#FFFFAE'; this.style.backgroundColor='#D0CC73';" onmouseout="this.style.color='#515151'; this.style.backgroundColor='#F6F5E3';">
		<span style="padding: 4px 10px 0px; display: block;">Illustrator 10</span>
	</a>
</li>
<li style="border: 1px solid rgb(188, 178, 179); margin: 0px 10px 0px 0px; padding: 0px; float: left; height: 30px; text-align: center; background-color: rgb(246, 245, 227);">
	<a href="JavaScript: getFireWorks();" style="text-decoration: none; color: rgb(81, 81, 81); display: block;" onmouseover="this.style.color='#FFFFAE'; this.style.backgroundColor='#D0CC73';" onmouseout="this.style.color='#515151'; this.style.backgroundColor='#F6F5E3';">

		<span style="padding: 4px 10px 0px; display: block;">FireWorks 8</span>
	</a>
</li>
<li style="border: 1px solid rgb(188, 178, 179); margin: 0px 10px 0px 0px; padding: 0px; float: left; height: 30px; text-align: center; background-color: rgb(246, 245, 227);">
	<a href="JavaScript: getPhotoShop();" style="text-decoration: none; color: rgb(81, 81, 81); display: block;" onmouseover="this.style.color='#FFFFAE'; this.style.backgroundColor='#D0CC73';" onmouseout="this.style.color='#515151'; this.style.backgroundColor='#F6F5E3';">
		<span style="padding: 4px 10px 0px; display: block;">PhotoShop CS2</span>
	</a>
</li>
<li style="border: 1px solid rgb(188, 178, 179); margin: 0px 10px 0px 0px; padding: 0px; float: left; height: 30px; text-align: center; background-color: rgb(246, 245, 227);">
	<a href="JavaScript: getHtmlCss();" style="text-decoration: none; color: rgb(81, 81, 81); display: block;" onmouseover="this.style.color='#FFFFAE'; this.style.backgroundColor='#D0CC73';" onmouseout="this.style.color='#515151'; this.style.backgroundColor='#F6F5E3';">

		<span style="padding: 4px 10px 0px; display: block;">HTML</span>
	</a>
</li>
<li style="border: 1px solid rgb(188, 178, 179); margin: 0px 10px 0px 0px; padding: 0px; float: left; height: 30px; text-align: center; background-color: rgb(246, 245, 227);">
	<a href="JavaScript: getFormToEmail();" style="text-decoration: none; color: rgb(81, 81, 81); display: block;" onmouseover="this.style.color='#FFFFAE'; this.style.backgroundColor='#D0CC73';" onmouseout="this.style.color='#515151'; this.style.backgroundColor='#F6F5E3';">
		<span style="padding: 4px 10px 0px; display: block;">Contact</span>
	</a>
</li>
</ul></div>

Code (markup):

Gilgal's Portfolio