Menu css/javascript qui change mon affichage

Bonjour,

J'ai créer une page en html, avec un fichier css, mais quand je veux mettre un menu (css+java), l'affichage de ma page change pour me mettre mon menu au centre de la page, modifiant de ce fait ma mise en page.
J'ai essayer de mettre tout mon code css dans un même fichier, de mettre deux fichiers css séparés tout dans ma page (css dans le code html) ... rien n'y fait.

Mon menu :

css:

#menu{
	width:150px;
	margin:20px auto 0 auto;
}
.menu, .sousmenu{
	text-align:center;
}
.menu{
	height:18px;
	width:150px;
	padding:2px 0;
	background:#404040;
	color:#fff;
}
.sousmenu{
	height:18px;
	width:150px;
	padding:1px 0;
	background:#808080;
	color:#fff;
}
.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#404040;
}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#808080;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
	background:#ca0008;
}

et dans ma page html :

<div id="menu">
	<div class="menu" id="menu1" onclick="afficheMenu(this)">
		<a href="#">Menu 1</a>
	</div>
	<div id="sousmenu1" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.4</a>
		</div>
	</div>
	
	<div class="menu" id="menu2" onclick="afficheMenu(this)">
		<a href="#">Menu 2</a>
	</div>
	<div id="sousmenu2" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.3</a>
		</div>
	</div>
	
	<div class="menu" id="menu3" onclick="afficheMenu(this)">
		<a href="#">Menu 3</a>
	</div>
	
	<div class="menu" id="menu4" onclick="afficheMenu(this)">
		<a href="#">Menu 4</a>
	</div>
	<div id="sousmenu4" style="display:none">
		<div class="sousmenu">
			<a href="#" >Sous-Menu 4.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.4</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.5</a>
		</div>
	</div>
</div>

Please help me.