Hocam menünün üstüne gelince altında açılır menü açtırdım sonunda fakat yan yana açılıyor alt alta ana menü hizasında nasıl açtırabilirim ?

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"><!--
/*- Menu Tabs --------------------------- */ 	

#menu {
	font-family: Arial, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0px;
	padding: 5px 0 0 15px;
	list-style-type: none;
	background-color: #eee;
	font-size: 13px;
	height: 37px;
	border-top: 2px solid #eee;
}
#menu li {
	float: left;
	margin: 0;				
}
#menu li a {
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
    background-color: #D6D9DB;
    color: #3C4349;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    padding: 8px 33px;
	margin: 0 10px 0 0;
	text-decoration:none;
}
#menu li a:hover, #menu li.active a {
	background-color: #0096FF;
	color: #fff;
}
#menu_wrapper ul {margin-left: 12px;}
#menu_wrapper {
	position:relative;
	left:-16px;
	padding:0px;
	background-color:#eeeeee;
	width:960px;
}
#menu_wrapper .left {float: left; height: 44px; width: 12px;}
ul#menu li ul { 
    display: none; 
    position: absolute; 
    top: 19px; /* yukseklik 15px + sonradan eklenecek paddingler 4px toplam 19px */ 
    left: 0; 
}
ul#menu li > ul { 
    top: auto; 
    left: auto; 
}
ul#menu li:hover ul { 
    display: block;
	
}


--></style>
<ul id="menu">
<li><a href="index.html">menu 1</a>
<ul> 
        <li><a href="#">alt menu1 </a></li> 
        <li><a href="#">alt menu2</a></li> 
        <li><a href="#">alt menu3</a></li> 
    </ul> 
</li>
<li>
<a href="kategori/1.html">menu 2</a>
</li>