Pb dans mon menu deroulant

Voici mon probleme : j'ai sur ma page un menu deroulant qui marche (a peu pres) bien, c'est a dire qu'il y a un menu vertical et lorsque l'on passe la souris sur l'un des elements de la liste, un menu s'affcihe, legerement sur le droite...

Cependant, 2 problemes persistent :
- tout d'abord, a chaque chargement de la page, mon menu deroulant s'affiche tres furtivement, mais ca fait pas tres chouette quand meme! Je ne sais plus où je l'avais récupéré, peut etre bien sur ce site... Enfin voila le code :

<!-- Menu  -->
<dl id="menu">

<?
include ("connect.inc");
// on se connecte a la base de donnees
$connexion = mysql_connect ($host, $user, $pass) or die ("Erreur lors de la connection a la base de donnees");
$db = mysql_select_db ($database, $connexion) or die ("Erreur lors de la selection de la base de donnees");
// on recupere toutes les categories existantes
$req = "SELECT cat_id, cat_nom, cat_parent_id FROM categorie WHERE cat_parent_id='NULL' ORDER BY cat_nom";
$result = mysql_query ($req) or die ("Erreur de requete");

$cpt=1;
$couleur="#FDF1DB";
// pour toutes les categories
while ($ligne = mysql_fetch_array($result))
{
	if ($couleur=="#EFE2D3")
	{
		$couleur="#FDF1DB";
	}
	else if ($couleur=="#FDF1DB")
	{
		$couleur="#EFE2D3";
	}
	extract ($ligne);					
	$req2 = "SELECT * FROM categorie WHERE cat_parent_id='$cat_id' ORDER BY cat_nom";
	$result2 = mysql_query ($req2) or die ("Erreur de requete2");
?>
	<dt style="background-color:<? echo $couleur; ?>" onMouseOver="javascript:montre('smenu<? echo $cpt; ?>');" onMouseOut="javascript:montre();"><a href="liste_produits.php?page=liste&cate=<? echo $cat_id; ?>"><? echo $cat_nom; ?></a></dt>
		<dd id="smenu<? echo $cpt; ?>" onMouseOver="javascript:montre('smenu<? echo $cpt; ?>');" onMouseOut="javascript:montre();">
			<ul>
<?
	while ($ligne2 = mysql_fetch_array($result2))
	{
		extract($ligne2);
?>
				<li><a href="liste_produits.php?page=liste&cate=<? echo $cat_id; ?>"><? echo $cat_nom; ?></a></li>
<?
	}
	echo ("</ul></dd>");
	$cpt++;
}
?>
</dl>

- Ensuite, le menu deroulant s'affiche actuellement de maniere statique, ce qui signifie qu'au fur et a mesure que j'agrandi ma fenetre, ce menu sperpose de plus en plus mon menu d'origine (car ma page est structuré dans un tableau a l'origine qui est centré). Comment puis-je faire pour que le sous menu deroulant se situe toujours juste a droite de mon menu de base, quelque soit la taille de la fenettre?

Voici egalement une partie de ma CSS, afin que vous ayez tous les elements en mains pour m'aider :

      div.fixe {
		position: relative;
		top : 160px;
		left : 5px;
	}
	
	dl, dt, dd, ul, li {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	
	#menu {
		/*position: absolute;
		top: 1em;
		left: 1em;*/
		width: 10em;
	}

	#menu dt {
		cursor: pointer;
		background: #FEF7E4;
		/*height: 20px;
		line-height: 20px;
		margin: 2px 0;
		border: 1px solid gray;*/
		text-align: center;
		/*font-weight: bold;*/
	}

	#menu dd {
		position: absolute;
		z-index: 100;
		left: 10em;
		margin-top: -1.4em;
		width: 10em;
		background: #FEF7E4;
		border: 1px solid gray;
	}

	#menu ul {
		padding: 2px;
	}

	#menu li {
		text-align: center;
		font-size: 85%;
		height: 18px;
		line-height: 18px;
	}

	#menu li a, #menu dt a {
		color: #000000;
		text-decoration: none;
		/*display: block;*/
	}

	#menu dt a:hover {
		/*background: #FFFFCC;*/
		color: #999999;
	}

	#menu li a:hover {
		/*text-decoration: underline;*/
		color: #999999;
		/*background-color: #3399FF;
		/*background: #FFFFCC;*/
	}

	#mentions {
		font-family: verdana, arial, sans-serif;
		position: absolute;
		bottom : 200px;
		left : 10px;
		color: #000;
		background-color: #ddd;
	}

	#mentions a {
		text-decoration: none;
		color: #222;
	}

	#mentions a:hover {
		text-decoration: underline;
	}

	#menu dt dd ul li a:hover {
		background-color: #FF6633;
	}

N'importe quelle idée m'interesse, alors n'hesitez pas!!!

Merci