Tag que atrapalha o layout

Boa noite a todos!

Estou precisando de informações sobre como adaptar da melhor forma o menu do tutorial http://www.maujor.com/tutorial/ddownmenu.php ao meu site. Na verdade, já consegui fazê-lo funcionar, porém não estou conseguindo resolver um problema com as tags <ul> do código fonte, as quais deveriam apenas orientar o posicionamento dos submenus, mas estão também desformatando o layout do site todo, como podem notar na imagem:

http://www.cjb.net/images.html?a8226.jpg

Observem também a configuração do CSS contido no código fonte:

CODE

<style type="text/css">ul {

	margin: 0;

	padding: 0;

	list-style: none;

	width: 150px;

	}

ul div {

	position: relative;

	}

div ul {

	position: absolute;

	left: 149px;

	top: 0;

	display: none;

	}

html ul div { float: left; }

html ul div a { height: 1%; }

ul {

	margin: 0;

	padding: 0;

	list-style: none;

	width: 150px;

	border-bottom: 0px solid #ccc;

	}

div:hover ul { display: block; }

a:link {

	border: 0;

	text-decoration: none;

}

a:visited {

	text-decoration: none;

}

a:hover {

	text-decoration: none;

}

a:active {

	text-decoration: none;

}

</style>

E aqui, as tags que supostamente estariam causando este espaçamento entre a imagem e a borda da célula da tabela (destacado em vermelho):

CODE

 <tr> <td width="150" height="30"><ul>

 <div><a href="loja.html" target="inicio"><img src="img/loja.jpg" name="Image2" width="150" height="30" border="0" id="Image2" onMouseOver="MM_swapImage('Image2','','img/loja2.jpg',1)" onMouseOut="MM_swapImgRestore()"></img></a>

 **<ul>**

 <div><a href="sobre.html" target="inicio"><img src="img/sobre.gif" border="0" name="sobre" onMouseOver="MM_swapImage('sobre','','img/sobre2.gif',1)" onMouseOut="MM_swapImgRestore()"></img></a></div>

 <div><a href="filiais.html" target="inicio"><img src="img/filiais.gif" border="0" name="filiais" onMouseOver="MM_swapImage('filiais','','img/filiais2.gif',1)" onMouseOut="MM_swapImgRestore()"></img></a></div>

 <div><a href="#" target="inicio"><img src="img/fotos.gif" border="0" name="fotos" onMouseOver="MM_swapImage('fotos','','img/fotos2.gif',1)" onMouseOut="MM_swapImgRestore()"></img></a></div>

 </ul>

 </div></td>

 </tr>

Este é apenas o exemplo do menu "A Loja", o mesmo ocorre nos menus abaixo dele. Já tentei posicionar a tag de forma diferente mas não obtive sucesso, e já estou incomodado com isso. Além disso, sou extremamente novato em CSS.

Se alguém teve a paciência de ler até aqui e entender o meu problema, peço que, se puder, me ajude.

Desde já eu agradeço muito pela atenção!